JavaScript闭包的自我修养

╰+攻爆jí腚メ 2022-03-26 09:36 166阅读 0赞

#### 1.概述 ####

###### 1.1 定义 ######

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。  
【JavaScript权威指南】中指出，从技术的角度讲，所有的JavaScript函数都是闭包：它们都是对象，它们都关联到了作用域链。

闭包被很多人认为是一个很难理解的概念。其实闭包很简单，就是一个能够访问父函数局部变量的函数，父函数在执行完后，内部的变量还存在内存上让闭包使用。  
闭包可用如下代码简单示例：

函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。

function A() {
      let a = 1
      function B() {
          console.log(a)
      }
      return B
    }
    const C = A();
    C(); // 1

你是否会疑惑，为什么函数 A 已经弹出调用栈了，为什么函数 B 还能引用到函数 A 中的变量。因为函数 A 中的变量这时候是存储在堆上的。现在的 JS 引擎可以通过逃逸分析辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。

###### 1.2 回收机制 ######

在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数A被B引用，B又被A外的C引用，这就是为什么函数A执行后不会被回收的原因,反而一直能够背C进行使用。

我们再来看一个简单又实用的闭包小技巧

这里我们就是用了在同一个作用域中定义两个闭包，这两个闭包共享私有变量和变量的形式，通过这种形式我们能够实现很多更有趣的功能点和模块封装。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]

##### 2.闭包面试问题 #####

经典面试题，循环中使用闭包解决 var 定义函数的问题

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

运行结果如下所示,我们能够看到会打印出5个相同的i,值为6,我们可以分析出,首先因为 setTimeout 是个异步函数，所有会先把循环全部执行完毕，然后线程再去执行异步操作,这时候for循环已经将 i递加,并且值 就是 6 了，所以会输出一堆 6。

![在这里插入图片描述][20190116172717831.png]  
解决办法有三种，第一种使用闭包:

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

如下所示结果,当我们使用闭包的方式,能够正常打印结果,其实在代码中相当于是使用for循环生成了5个function,并且按照i进行传参数给function,这个为啥叫做闭包,是因为setTimeout调用了立即执行函数的变量j:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]  
第二种就是使用 setTimeout 的第三个参数

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

通过传递参数给setTimeout第三个参数i值,通过传递参数的形式将i值传给j,然后可以看到如下面结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1]

第三种就是使用 let 定义 i 了

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

因为对于 let 来说，他会创建一个块级作用域，相当于

{ // 形成块级作用域
      let i = 0
      {
        let ii = i
        setTimeout( function timer() {
            console.log( ii );
        }, i*1000 );
      }
      i++
      {
        let ii = i
      }
      i++
      {
        let ii = i
      }
      ...
    }

显示结果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2]

##### 3.更有意思的闭包问题 #####

下面是一个更有意思的示例 — makeAdder 函数：

function makeAdder(x) {
      return function(y) {
        return x + y;
      };
    }
    var add5 = makeAdder(5);
    var add10 = makeAdder(10);
    console.log(add5(2));  // 7
    console.log(add10(2)); // 12

在这个示例中，我们定义了 makeAdder(x) 函数，它接受一个参数 x ，并返回一个新的函数。返回的函数接受一个参数 y，并返回x+y的值。

从本质上讲，makeAdder 是一个函数工厂 — 他创建了将指定的值和它的参数相加求和的函数,当我们打印出add5和add10的时候,能够看到函数工厂生成的函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 3]  
在上面的示例中，我们使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和，另一个和 10 求和。

add5 和 add10 都是闭包。它们共享相同的函数定义，**但是保存了不同的词法环境**。在 add5 的环境中，x 为 5。而在 add10 中，x 则为 10。

##### 4.实用的闭包 #####

因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。  
在 Web 中，你想要这样做的情况特别常见。大部分我们所写的 JavaScript 代码都是基于事件的 — 定义某种行为，然后将其添加到用户触发的事件之上（比如点击或者按键）。我们的代码通常作为回调：为响应事件而执行的函数。  
假如，我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定 body 元素的 font-size，然后通过相对的 em 单位设置页面中其它元素（例如header）的字号：

body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
    }
    h1 {
      font-size: 1.5em;
    }
    h2 {
      font-size: 1.2em;
    }

我们的文本尺寸调整按钮可以修改 body 元素的 font-size 属性，由于我们使用相对单位，页面中的其它元素也会相应地调整。  
以下是 JavaScript：

function makeSizer(size) {
      return function() {
        document.body.style.fontSize = size + 'px';
      };
    }
    var size12 = makeSizer(12);
    var size14 = makeSizer(14);
    var size16 = makeSizer(16);

size12，size14 和 size16 三个函数将分别把 body 文本调整为 12，14，16 像素。我们可以将它们分别添加到按钮的点击事件上。如下所示：

document.getElementById('size-12').onclick = size12;
    document.getElementById('size-14').onclick = size14;
    document.getElementById('size-16').onclick = size16;
    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>

##### 5.闭包模拟私有方法 #####

编程语言中，比如 Java，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。  
而 JavaScript 没有这种原生支持，但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。

在之前的示例中，每个闭包都有它自己的词法环境；而这次我们只创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。  
该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。  
这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。

##### 6.参考 #####

1.[面试题汇总][Link 1]  
2.[MDN闭包][MDN]  
3.[深入理解javascript原型和闭包（15）——闭包][javascript_15]  
4.[常见闭包举例][Link 2]

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220326/8f89cd3c7cd24713a7e6750ee74b1831.png
[20190116172717831.png]: /images/20220326/8524ae4461fd4127a41730a0b1573536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]: /images/20220326/1c0a477ef37e487990f598eb55ae3613.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1]: /images/20220326/799c8dd3ad124895958bc3f6087eea28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2]: /images/20220326/510b2ef351304e7d851222723e9ddfc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 3]: /images/20220326/e50f4e1b6bf8464e887ce49776db9fa0.png
[Link 1]: https://juejin.im/post/5ba34e54e51d450e5162789b?utm_source=gold_browser_extension
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
[javascript_15]: https://www.cnblogs.com/wangfupeng1988/p/3994065.html
[Link 2]: https://blog.csdn.net/weixin_43586120/article/details/89456183
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 4]: /images/20220326/f4f22267712747d1a521e4ecdc39a1a7.png