首页 > 编程语言 >JavaScript复习记录(6)— 对闭包的理解,闭包使用场景

JavaScript复习记录(6)— 对闭包的理解,闭包使用场景

时间:2024-07-19 16:59:25浏览次数:16  
标签:闭包 function console 复习 函数 JavaScript count log

闭包(Closure)指的是一个函数可以访问其外部作用域(即使这个函数是在外部作用域之外执行的)。换句话说,闭包是函数和声明该函数的词法环境的组合。

闭包的形成

闭包在以下情况下形成:当一个内部函数被保存到外部后,即使外部函数已经执行完毕,内部函数仍然可以访问外部函数中的变量。

function outerFunction() {
    var outerVar = "I'm outside!";

    function innerFunction() {
        console.log(outerVar); // 访问外部函数的变量
    }

    return innerFunction;
}

var closureFunction = outerFunction();
closureFunction(); // "I'm outside!"

在这个例子中,innerFunctionouterFunction执行结束后仍然可以访问outerVar,这就是闭包的体现。

闭包的使用场景

1. 数据隐藏和封装

闭包可以用于创建私有变量,从而实现数据隐藏和封装。

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
console.log(counter.getCount()); // 1
2. 事件处理器和回调函数

在事件处理器和回调函数中使用闭包,可以访问外部函数的变量,从而在事件触发时使用这些变量。

function attachEventHandler(element, value) {
    element.onclick = function() {
        console.log(value);
    };
}

const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);

attachEventHandler(button, 'Button clicked!');
3. 模块模式

闭包是实现模块模式的基础,使得模块内部的变量和函数对外部不可见,只暴露出公共接口。

const myModule = (function() {
    let privateVar = 'I am private';

    function privateFunction() {
        console.log(privateVar);
    }

    return {
        publicFunction: function() {
            privateFunction();
        }
    };
})();

myModule.publicFunction(); // "I am private"
4. 创建工厂函数

闭包可以用于创建工厂函数,根据不同的参数生成不同的功能实例。

function createGreeter(greeting) {
    return function(name) {
        console.log(greeting + ', ' + name);
    };
}

const sayHello = createGreeter('Hello');
sayHello('Alice'); // "Hello, Alice"
sayHello('Bob');   // "Hello, Bob"

const sayHi = createGreeter('Hi');
sayHi('Charlie'); // "Hi, Charlie"
5. 减少全局变量的使用

通过使用闭包,可以避免污染全局命名空间,减少全局变量的使用。

(function() {
    var localVar = "I'm local";
    console.log(localVar); // "I'm local"
})();

console.log(localVar); // Error: localVar is not defined

标签:闭包,function,console,复习,函数,JavaScript,count,log
From: https://blog.csdn.net/qq_52050536/article/details/140554476

相关文章

  • python 爬虫技术 第02节 基础复习
    Python基础复习Python是一种高级、通用、解释型的编程语言,以其简洁的语法和强大的功能在数据科学、Web开发、自动化脚本编写、机器学习等领域广泛使用。下面是一些Python基础概念的复习:1.数据类型Python支持多种内置数据类型,包括:数字(int,float,complex)字符串......
  • JavaScript手机号实名认证接口如何集成 验证手机号与持有人是否一致
    手机号实名认证接口是一种用于验证手机号码是否存在的实名登记服务,能够核验三大运营商(中国移动、中国电信、中国联通)手机号码的实名认证状态,通常被应用于网站、电商平台注册、支付平台注册等场景中,以便于核验用户身份的真伪,以此来保障用户身份信息与财产不受损失!随着市场......
  • JavaScript 异步编程
    0x01概念说明与基本使用Promise是在ES6中引入的类,用于更好地编写复杂的异步任务在ES6之前的异步请求的处理方案中,通常通过传递回调函数的方式处理请求结果,由于各个请求对回调函数不统一,每次请求时都需要查看相应的源码,造成效率低下,因此需要约定共同的标准,即Promise类......
  • 【算法设计与分析】期末考试复习 - 基础知识(基础知识超详细)
    文章目录前言引言问题问题描述实例目标数学表达步骤示例伪代码解释1.问题的复杂度冒泡排序笔记选择排序笔记插入排序笔记归并排序笔记快速排序笔记一些问题哪个排序算法效率最高?是否可以找到更好的排序算法?排序问题计算难度如何?其他排序算法的复杂度问题计算复杂度估......
  • java八股复习指南-计网篇
    网络分层模型osi七层模型tcp-ip四层模型应用层传输层网络层网络接口层与osi七层模型对应为:应用层主要提供两个终端设备上应用之间的消息交换的服务。它定义了消息交换的格式。常见协议有:结合常见的协议,可以这样理解应用层:应用层就是专门为特定的应用之间的通信提......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站(西餐)
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 如何在 Vue 和 JavaScript 中截取视频任意帧图片
    如何在Vue和JavaScript中截取视频任意帧图片大家好!今天我们来聊聊如何在Vue和JavaScript中截取视频的任意一帧图片。这个功能在很多场景下都非常有用,比如视频编辑、视频预览等。本文将带你一步步实现这个功能,并且会提供详细的代码示例。准备工作首先,我们需要一个Vue......
  • njs最详细的入门手册:Nginx JavaScript Engine
    原文链接:https://hi.imzlh.top/2024/07/08.cgi关于njs首先,njs似乎在国内外都不受关注,资料什么的只有官网参考手册,出了个问题只能看到GithubIssue所以,这篇文章将我的探索过程展示给大家,njs对于可用存储空间较小的设备真的很友好,相比较于NodeJS、Deno这种80M起步的运行环境真的......
  • 代码随想录二刷复习(二分法)
    二分法模板:1:左闭右闭区间写法第一种写法,我们定义target是在一个在左闭右闭的区间里,也就是[left,right](这个很重要非常重要)。区间的定义这就决定了二分法的代码应该如何写,因为定义target在[left,right]区间,所以有如下两点:while(left<=right)要使用<=,因为left==rig......
  • 编程世界的对决:JavaScript vs Java
    在编程领域,Java和JavaScript这两门语言各有千秋。它们不仅在语法上有着明显的区别,在编程理念、表现力、类型转换以及代码的易读性和复杂性方面也有着巨大的差异。本文将深入探讨JavaScript相较于Java的优势,以及两者在代码风格和开发体验上的不同。1.表现力的对比1.1JavaScr......