大话javascript 3期：闭包

摘要：由此可知闭包是函数的执行环境以及执行环境中的函数组合而构成的。此时产生了闭包。二闭包的作用闭包的特点是读取函数内部局部变量，并将局部变量保存在内存，延长其生命周期。三闭包的问题使用闭包会将局部变量保持在内存中，所以会占用大量内存，影响性能。

闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境(包含自由变量)。环境由闭包创建时在作用域中的任何局部变量组成。

闭包是指有权访问另外一个函数作用域中的变量的函数

闭包是函数以及函数声明所在的词法环境的组合。

由此，我们可以看出闭包共有两部分组成：闭包 = 函数 + 函数能够访问的自由变量

举个例子：

var a = 1;
function foo() {
  console.log(a);
}
foo();

foo 函数可以访问变量 a，但是 a 既不是 foo 函数的局部变量，也不是 foo 函数的参数，所以 a 就是自由变量。那么，函数 foo + foo 函数访问的自由变量 a 不就是构成了一个闭包嘛

function fa(){
    var va = "this is fa";
    function fb(){
        console.log(va);
    }    
    return fb;
}

var fc = fa();
fc();
//"this is fa"

其实，简单点说，就是在 A 函数内部，存在 B 函数， B函数 在 A 函数 执行完毕后再执行。B执行时，访问了已经执行完毕的 A函数内部的变量和函数。

由此可知：闭包是函数A的执行环境以及执行环境中的函数B组合而构成的。

变量都储存在其所在执行环境的活动对象中，所以说是函数A的执行环境。

当函数A执行完毕后，函数B再执行，B的作用域中就保留着函数A的活动对象，因此B中可以访问A中的变量，函数，arguments对象。此时产生了闭包。大部分书中，都把函数B称为闭包，而在谷歌浏览器中，把A函数称为闭包。

之前说过，当函数执行完毕后，局部活动对象就会被销毁。其中保存的变量，函数都会被销毁。内存中仅保存全局作用域（全局执行环境的变量对象）。但是，闭包的情况就不同了。

以上面的例子来说，函数fb和其所在的环境函数fa，就组成了闭包。函数fa执行完毕后，按道理说， 函数fa执行环境中的 活动对象就应该被销毁了。但是，因为函数fa执行时，其中的函数fb被返回，被变量fc引用着。导致，函数fa的活动对象没有被销毁。而在其后fc()执行，就是函数fb执行时，构建的作用域中保存着函数fa的活动对象，因此，函数fb中可以通过作用域链访问函数fa中的变量。

其实，简单的说：就是fa函数执行完毕了，其内部的fb函数没有执行，并返回fb的引用，当fb再次执行时，fb的作用域中保留着fa函数的活动对象。

闭包的特点是读取函数内部局部变量，并将局部变量保存在内存，延长其生命周期。

作用

通过闭包，在外部环境访问内部环境的变量。

使得这些变量一直保存在内存中，不会被垃圾回收。

以使用闭包实现以下功能：

在实际开发中，经常会遇到需要循环绑定事件的需求，比如在id为container的元素中添加5个按钮，每个按钮的文案是相应序号，点击打印输出对应序号。
其中第一个方法很容易错误写成：

var container = document.getElementById("container");
for(var i = 1; i <= 5; i++) {
 var btn = document.createElement("button"),
     text = document.createTextNode(i);
 btn.appendChild(text);
 btn.addEventListener("click", function(){
   console.log(i);
 })
 container.appendChild(btn);
}

虽然给不同的按钮分别绑定了事件函数，但是5个函数其实共享了一个变量 i。由于点击事件在 js 代码执行完成之后发生，此时的变量 i 值为6，所以每个按钮点击打印输出都是6。
为了解决这个问题，我们可以修改代码，给各个点击事件函数建立独立的闭包，保持不同状态的i。

var container = document.getElementById("container");
for(var i = 1; i <= 5; i++) {
 (function(_i) {
   var btn = document.createElement("button"),
       text = document.createTextNode(_i);
   btn.appendChild(text);
   btn.addEventListener("click", function(){
     console.log(_i);
   })
   container.appendChild(btn);
 })(i);
}

注：解决这个问题更好的方法是使用 ES6 的 let，声明块级的局部变量。

function makeCounter() {
  var value = 0;
  return {
    getValue: function() {
      return value;
    },
    increment: function() {
      value++;
    },
    decrement: function() {
      value--;
    }
  }
}

var a = makeCounter();
var b = makeCounter();
b.increment();
b.increment();
b.decrement();
b.getValue(); // 1
a.getValue(); // 0
a.value; // undefined

每次调用makeCounter函数，环境是不相同的，所以对b进行的increment/decrement操作不会影响a的value属性。同时，对value属性，只能通过getValue方法进行访问，而不能直接通过value属性进行访问。

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

正常预想下，上面这段代码我们以为是分别输出数字1-5，每秒一个。
但实际上，运行时输出的却是每秒输出一个6，一共五次。

Why?

for循环有一个特点，就是“i判断失败一次才停止”。所以，i在不断的自加1的时候，直到i等于5，i才失败，这时候循环体不再执行，会跳出，所以i等于5没错。那么为什么5次循环的i都等于5？原因就是setTimeout()的回调，也就是console.log(i);被压到任务队列的最后，for循环是同步任务，所以先执行，等于是空跑了5次循环。于是，i都等于5之后，console.log(i);刚开始第一次执行，当然输出全是5。

根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点，for循环里定义了5个setTimeout操作。而当这些操作开始执行时，for循环的i值，已经先一步变成了6。因此输出结果总为6。而我们想要让输出结果依次执行，我们就必须借助闭包的特性，每次循环时，将i值保存在一个闭包中，当setTimeout中定义的操作执行时，则访问对应闭包保存的i值即可。

简单来说，原因是，延迟函数的回调会在循环结束时才执行。
根据作用域的工作原理，循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，实际上只有一个i。

解决办法

方法1：用立即执行函数模拟块级作用域

利用立即执行函数和函数作用域来解决，用自执行函数传参，这样自执行函数内部形成了局部作用域，不受外部变量变化的影响。

我们可以通过立即执行函数创建作用域。（立即执行函数会通过声明并立即执行一个函数来创建作用域）。

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

方法2：利用闭包

function makeClosures(i){     //这里就和 内部的匿名函数构成闭包了
    var i = i;               //这步是不需要的，为了让看客们看的轻松点
    return function(){
        console.log(i);     //匿名没有执行，它可以访问i的值，保存着这个i的值。
    }
}

for (var i=1; i<=5; i++) {
    setTimeout(makeClosures(i),i*1000);  
    
    //这里简单说下，这里makeClosures(i)， 是函数执行，并不是传参，不是一个概念
    //每次循环时，都执行了makeClosures函数，都返回了一个没有被执行的匿名函数
    //（这里就是返回了5个匿名函数），每个匿名函数都是一个局部作用域，保存着每次传进来的i值
    //因此，每个匿名函数执行时，读取`i`值，都是自己作用域内保存的值，是不一样的。所以，就得到了想要的结果
}

//1
//2
//3
//4
//5

方法3：利用块级作用域

ES6引入的let在循环中不止会被声明一次，在每次迭代都会声明：

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

因为使用let，导致每次循环都会创建一个新的块级作用域，这样，虽然setTimeout 中的匿名函数内没有 i 值，但它向上作用域读取i 值，就读到了块级作用域内 i 的值。

使用闭包会将局部变量保持在内存中，所以会占用大量内存，影响性能。所以在不再需要使用这些局部变量的时候，应该手动将这些变量设置为null, 使变量能被回收。

当闭包的作用域中保存一些DOM节点时，较容易出现循环引用，可能会造成内存泄漏。原因是在IE9以下的浏览器中，由于BOM 和DOM中的对象是使用C++以COM 对象的方式实现的，而COM对象的垃圾收集机制采用的是引用计数策略，当出现循环引用时，会导致对象无法被回收。当然，同样可以通过设置变量为null解决。

举例如下：

function func() {
  var element = document.getElementById("test");
  element.onClick = function() {
      console.log(element.id);
  };
}

func 函数为 element 添加了闭包点击事件，匿名函数中又对element进行了引用，使得 element 的引用始终不为0。解决办法是使用变量保存所需内容，并在退出函数时将 element 置为 null。

function func() {
  var element = document.getElementById("test"),
      id = element.id;
  element.onClick = function() {
      console.log(id);
  };
  element = null;
}

模块也是利用了闭包的一个强大的代码模式。

function CoolModule(){
    var something="cool";
    var anothor=[1,2,3];
    
    function doSomething(){
        console.log(something);
    }
    
    function doAnthor(){
        console.log(anothor.join("!"));
    }
    
    return{
        doSomethig:doSomething,
        doAnothor:doAnother
    };
}

var foo=CoolMOdule();
foo.doSomething();//cool
foo.doAnother();//1!2!3

模块有2个主要特征：

为创建内部作用域而调用了一个包装函数；

包装函数的返回值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭包。

关于模块的引入

import可以将一个模块中的一个或多个API导入到当前作用域中，并分别绑定在一个变量上；

module会将整个模块的API导入并绑定到一个变量上；

export会将当前模块的一个标识符导出为公共API。

如果你觉得这篇文章对你有所帮助，那就顺便点个赞吧，点点关注不迷路~

黑芝麻哇，白芝麻发，黑芝麻白芝麻哇发哈！

前端哇发哈