【js进阶】-闭包

闭包，一说起这个词，很多人觉得就很难理解，或者说很难记住，那是因为对于该词的解释版本太多了，导致你都不知道哪个是正确的解释

一、定义

从理论角度：闭包是指那些能够访问自由变量的函数，所以说所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域，所以从理论的角度，所有函数都算是闭包

从实践角度：以下函数才算是闭包：

• 即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）
• 在代码中引用了自由变量

根据这个定义，我们来看个例子：

var  name= "global name";
function showName(){
    var name = "local name";
    function fn(){
        return name;
    }
    return fn;
}

var foo = showName();
foo();

首先我们分析下其执行上下文和执行上下文栈的变化情况：

1. 进入全局代码，创建全局执行上下文，全局执行上下文会被压入执行上下文栈中
2. 全局执行上下文初始化，会创建全局环境的活动对象VO，这个全局活动对象VO会保存name的值，即global.VO.name=‘global name’
3. 创建showName函数，此时函数内部的[[scope]]属性会保存其父级活动变量的值，也就是showName.[[scope]] = [global.VO]
4. 执行showName函数时，会创建该函数的执行上下文，然后将该执行上下文压入执行上下文栈中，此时执行上下文栈中有两个值了，一个是刚才的全局执行上下文，还有一个就是新加的showName函数的执行上下文
5. 在showName函数执行上下文分析阶段时会创建作用域、this、活动变量，其中作用域的值就是该函数内部[[scope]]指向的内容，活动变量包含了arguments、变量（name=’undefined‘）、函数fn，创建了活动变量后，紧接着会将该函数的活动变量压入到 函数作用域链顶端，所以此时函数作用域链为[showName AO, global.VO]
6. 到了函数执行上下文执行阶段，会根据具体代码的值更新活动变量中的值，此时fn函数被定义，同样它内部的[[scope]]属性也会保存父级活动变量的值，即fn.[[scope]]=[showName.AO,global.VO]
7. showName函数执行完毕后，返回了一个函数fn，此时执行上下文栈中会将showName函数的执行上下文弹出
8. 最后执行foo（），其实也就是执行fn函数，此时就会创建fn函数的执行上下文，然后将该执行上下文压入执行上下文栈中，此时执行上下文栈中只有fn函数的执行上下文、以及全局执行上下文
9. 然后，创建完fn执行上下文后，同样也会进行其内部作用域链、this、活动变量的创建，同上步骤，fn函数作用域链为[fn.AO,showName.AO,global.VO ]，最后打印name值时，会先在fn函数的活动变量中找，没有，就会沿着作用域链，去showName.AO中找，找到了local name，就不会继续往上找，所以最终打印结果就是local name

以上就是具体的执行分析过程，如果对以上内容还不是很了解的同学，可以先去看下我的那篇关于执行上下文的博文 js基础-执行上下文/执行上下文栈

了解了这整个过程，我们应该思考一个问题，那就是：

当 fn 函数执行的时候，showName 函数上下文已经被销毁了啊(即从执行上下文栈中被弹出)，怎么还会读取到 showName 作用域下的 name 值呢？

那是因为刚才说了，fn函数依然可以通过 fn 函数的作用域链找到name变量，正是因为 JavaScript 做到了这一点，从而实现了闭包这个概念。

面试必刷题

接下来，看一下这道面试必考的闭包题：

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

答案是都是 3，让我们分析一下原因：
当执行到 data[0] 函数之前，此时全局上下文的 VO 为：

globalContext = {
    VO: {
        data: [...],
        i: 3
    }
}

当执行 data[0] 函数的时候，data[0] 函数的作用域链为：

data[0]Context = {
    Scope: [AO, globalContext.VO]
}

data[0]Context 的 AO 并没有 i 值，所以会从 globalContext.VO 中查找，i 为 3，所以打印的结果就是 3。

data[1] 和 data[2] 是一样的道理。

我们改成闭包看看：

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (i) {
        return function(){
            console.log(i);
        }
  })(i);
}

data[0]();
data[1]();
data[2]();

当执行到 data[0] 函数之前，此时全局上下文的 VO 为：

globalContext = {
    VO: {
        data: [...],
        i: 3
    }
}

当执行 data[0] 函数的时候，data[0] 函数的作用域链发生了改变：

data[0]Context = {
    Scope: [AO, 匿名函数Context.AO globalContext.VO]
}

匿名函数执行上下文的AO为：

匿名函数Context = {
    AO: {
        arguments: {
            0: 0,
            length: 1
        },
        i: 0
    }
}

data[0]Context 的 AO 并没有 i 值，所以会沿着作用域链从匿名函数 Context.AO 中查找，这时候就会找 i 为 0，找到了就不会往 globalContext.VO 中查找了，即使 globalContext.VO 也有 i 的值(值为3)，所以打印的结果就是0。

data[1] 和 data[2] 是一样的道理。