来一个前端闭包知识点

你的名字 2022-09-13 04:06 180阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

### 什么是闭包 ###

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

自由变量：是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。

闭包共有两部分组成：闭包 = 函数 + 函数能够访问的自由变量。

闭包是指有权访问另外一个函数作用域中的变量的函数。闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。

function makeFunc() { 
      var name = '奶油桃子'
      function displayName() { 
        console.log(name)
      }
      return displayName
    }
    
    var myFunc = makeFunc()
    myFunc()

### 闭包的本质 ###

当前环境中存在指向父级作用域的引用

### 闭包的优点 ###

*  可以重复使用变量，并且不会造成变量污染（全局变量可以重复使用，但是容易造成变量污染。局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。闭包结合了全局变量和局部变量的优点。）
 *  可以用来定义私有属性和私有方法。

### 闭包的缺点 ###

*  比普通函数更占用内存，会导致网页性能变差，容易造成内存泄露。

#### 闭包变量的存储位置 ####

由闭包的特点可以看出，闭包中的变量没有保存在栈中，而是保存到了堆中。如果变量存储在栈中，栈中数据在函数执行完成后就会被自动销毁。

### 闭包的作用 ###

*  封装私有变量
 *  柯里化 bind
 *  模块化
 *  函数防抖和节流

在定时器、事件监听、Ajax请求、跨窗口通信、Web Workers或者任何异步中，只要使用了回调函数，实际上就是在使用闭包，IIFE(立即执行函数表达式)创建闭包。

1.  首先会声明一个全局作用域（window）。
2.  第一步：全局作用域下的变量提升（注意：函数表达式、箭头函数、立即执行函数不会进行变量提升）。
3.  代码自上而下执行。
4.  正常的（数字/字符串）变量或常量直接赋值。
    
     *  如果遇到对象或者函数赋值就会在堆内存开辟一个内存空间，将字符串存进去。
        
         *  存储属性名
         *  将地址赋值给变量
         *  代码继续自上而下执行
     *  如果遇到自执行函数，就将自执行函数的返回结果赋值给变量。
        
         *  函数执行，声明一个私有的作用域（变量都是私有的）。
         *  函形参赋值。
         *  变量提升。
         *  自执行函数代码自上而下继续执行。
         *  如果自执行函数没有主体，则 this 指向的 window；注意：看改变的值改变的是私有变量还 是其他变量。 如果自执行函数返回一个函数（return）。
            
             *  开辟一个堆内存空间（将字符串存进去）；
             *  将该堆内存的地址返回给 return
         *  所以自执行函数执行返回的变量地址指向 return 的地址（也就是执行开辟的堆内存空 间）。
         *  此时函数内部的函数被外部的变量引用着，所以这个**私有的作用域不会销毁。**
     *  遇到函数执行。
        
         *  函数执行，形成一个私有的作用域（变量是私有的）。
         *  形参赋值。
         *  变量提升。
         *  函数自上而下执行。
         *  **this 的指向遵循三个原则，以及注意私有作用域变量的作用范围**
         *  函数执行完毕，进行作用域销毁

(() => { 
     let x, y;
     try { 
      throw new Error();
     } catch (x) { 
      (x = 1), (y = 2);
      console.log(x);
     }
     console.log(x);
     console.log(y);
    })();
    // 1 undefined 2

> 解析： catch块接收参数x。当我们传递参数时，这与变量的x不同。这个变量x是属于catch作用域的。之后，我们将这个块级作用域的变量设置为1，并设置变量y的值。 现在，我们打印块级作用域的变量x，它等于1。 在catch块之外，x仍然是undefined，而y是2。 当我们想在catch块之外的console.log(x)时，它返回undefined，而y返回2。

let res = new Array()
    for (var i = 0; i < 10; i++) { 
      res.push(function () { 
        return console.log(i)
      })
    }
    res[0]()
    res[1]()
    res[2]()
    // 10 10 10

> 期望输出的是0,1,2,实际上却不会。原因就是涉及「作用域」，怎么解决呢？
> 
> 使用let代替var，形成块级作用域  
> 使用bind函数。
> 
>     res.push(console.log.bind(null, i))
> 
> 解法还有其他的，比如使用IIFE，形成私有作用域等等做法。

### 闭包面试题 ###

{ 
      for (var i = 1; i <= 5; i++) { 
        setTimeout(function timer() { 
          console.log(i);
        }, i * 1000);
      }
    }

![在这里插入图片描述][c3fce7bb97a64c05ba562795d620837c.gif_pic_center]  
循环的终止条件是 i 不再 <=5。条件首次成立时 i 的值是 6。因此，输出显示的是循环结束时 i 的最终值。  
延迟函数的回调会在循环结束时才执行。当定时器运行时即使每个迭代中执行的是 setTimeout(…, 0)，所有的回调函数依然是在循环结束后才会被执行，因此会每次输出一个 6 出来。

解决思路：  
=> 在循环的过程中每个迭代都需要一个闭包作用域  
=> IIFE 会通过声明并立即执行一个函数来创建作用域。每个延迟函数都会将 IIFE 在每次迭代中创建的作用域封闭起来。

{ 
      for (var i = 1; i <= 5; i++) { 
        (function () { 
          var j = i;
          setTimeout(function timer() { 
            console.log(j);
          }, j * 1000);
        })();
      }
    }

仅仅将它们进行封闭是不够的。IIFE 只是一个什么都没有的空作用域。它需要包含一点实质内容才能正常工作。

改进 ===> 在迭代内使用 IIFE 会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。

{ 
      for (var i = 1; i <= 5; i++) { 
        (function (j) { 
          setTimeout(function timer() { 
            console.log(j);
          }, j * 1000);
        })(i);
      }
    }

持续改进 ===> let 声明，可以用来劫持块作用域，并且在这个块作用域中声明一个变量。

{ 
      for (var i = 1; i <= 5; i++) { 
        let j = i; // 闭包的块作用域
        setTimeout(function timer() { 
          console.log(j);
        }, j * 1000);
      }
    }

for 循环头部的 let 声明指出变量在循环过程中不止被声明一次，每次迭代都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

{ 
      for (let i = 1; i <= 5; i++) { 
        setTimeout(function timer() { 
          console.log(i);
        }, i * 1000);
      }
    }

参考书籍：你不知道的 JavaScript （上卷）

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/83c818e69a4e4943862783f0ffb14302.png
[c3fce7bb97a64c05ba562795d620837c.gif_pic_center]: /images/20220828/86062fa4064b473fbd108a25ee323e37.png