• 什么是JavaScript中的闭包?


    一  什么是闭包

    红宝书上对于闭包的定义:闭包是指有权访问另外一个函数作用域中的变量的函数,

    MDN 对闭包的定义为:闭包是指那些能够访问自由变量的函数。

    (其中自由变量,指在函数中使用的,但既不是函数参数arguments也不是函数的局部变量的变量,其 实就是另外一个函数作用域中的变量。)

    二  闭包产生的原因?

    首先要明白作用域链的概念,其实很简单,在ES5中只存在两种作用域————全局作用域和函数作用 域,当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直 到找到该变量的标示符或者不在父作用域中,这就是作用域链,值得注意的是,每一个子函数都会拷贝 上级的作用域,形成一个作用域的链条。 比如:

    1. var a = 1;
    2. function f1() {
    3. var a = 2
    4. function f2() {
    5. var a = 3;
    6. console.log(a);//3
    7. }
    8. }

    在这段代码中,f1的作用域指向有全局作用域(window)和它本身,而f2的作用域指向全局作用域 (window)、f1和它本身。而且作用域是从最底层向上找,直到找到全局作用域window为止,如果全局 还没有的话就会报错。就这么简单一件事情!

    闭包产生的本质就是,当前环境中存在指向父级作用域的引用。还是举上面的例子:

    1. function f1() {
    2. var a = 2
    3. function f2() {
    4. console.log(a);//2
    5. }
    6. return f2;
    7. }
    8. var x = f1();
    9. x();

    这里x会拿到父级作用域中的变量,输出2。因为在当前环境中,含有对f2的引用,f2恰恰引用了 window、f1和f2的作用域。因此f2可以访问到f1的作用域的变量。

    那是不是只有返回函数才算是产生了闭包呢?

     回到闭包的本质,我们只需要让父级作用域的引用存在即可,因此我们还可以这么做:

    1. var f3;
    2. function f1() {
    3. var a = 2
    4. f3 = function() {
    5. console.log(a);
    6. }
    7. }
    8. f1();
    9. f3();

    让f1执行,给f3赋值后,等于说现在f3拥有了window、f1和f3本身这几个作用域的访问权限,还是自底 向上查找,最近是在f1中找到了a,因此输出2。

    在这里是外面的变量f3存在着父级作用域的引用,因此产生了闭包,形式变了,本质没有改变。

    三  闭包有哪些表现形式

    在真实的场景中,究竟在哪些地方能体现闭包的存在?

    1. 返回一个函数。刚刚已经举例。
    2. 作为函数参数传递
      1. var a = 1;
      2. function foo(){
      3. var a = 2;
      4. function baz(){
      5. console.log(a);
      6. }
      7. bar(baz);
      8. }
      9. function bar(fn){
      10. // 这就是闭包
      11. fn();
      12. }
      13. // 输出2,而不是1
      14. foo();

    3.  在定时器、事件监听、Ajax请求、跨窗口通信、Web Workers或者任何异步中,只要使用了回调函 数,实际上就是在使用闭包。

    以下的闭包保存的仅仅是window和当前作用域。

    1. // 定时器
    2. setTimeout(function timeHandler(){
    3. console.log('111');
    4. },100)
    5. // 事件监听
    6. $('#app').click(function(){
    7. console.log('DOM Listener');
    8. })

            4  IIFE(立即执行函数表达式)创建闭包, 保存了 全局作用域window 和 当前函数的作用域 ,因此可以全局的 变量。

    1. var a = 2;
    2. (function IIFE(){
    3. // 输出2
    4. console.log(a);
    5. })();

  • 相关阅读:
    java计算机毕业设计计算机类专业考研交流学习平台MyBatis+系统+LW文档+源码+调试部署
    休闲卤味的商业江湖里,周黑鸭的巨变与出路
    排序:希尔排序(Shell Sort)算法分析
    基于Python和mysql开发的智慧校园答题考试系统(源码+数据库+程序配置说明书+程序使用说明书)
    【牛客刷题专栏】0x06:C数据结构栈实现循环队列及其重点
    判断一个Java服务是不是GateWay
    javafx简单介绍
    6-5漏洞利用-SSH弱口令破解利用
    智能工作流:Spring AI高效批量化提示访问方案
    uni-app解决表格uni-table样式问题
  • 原文地址:https://blog.csdn.net/m0_57965131/article/details/125617667