再学JS--闭包

MDN对闭包的定义：

闭包是指那些能够访问自由变量的函数

那什么是自由变量？

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

所有，闭包 = 函数 + 函数能访问到的自由变量

例如：

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

foo函数可以访问变量a，但是a既不是函数参数也不是foo函数的局部变量，所有a是局部变量。

所以foo函数+ foo函数能访问的自由变量a就构成了一个闭包，但是和以前理解的闭包不太一样。

上述说的闭包是理论闭包，其实还有一个实践角度上的闭包：

ECMAScript中，闭包是指

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

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

（1）即使创建它的上下文已经销毁，它既然存在（比如，内部函数从父函数中返回）

（2）在代码中引用了自由变量

分析

var scope = 'global scope'
function checkscope() {
    var scope = 'local scope'
    function f() {
        return scope
    }
    return f
}
var foo = checkscope()
foo()

分析下上述代码的执行过程：

1. 进入全局代码，创建全局执行上下文，全局执行上下文压入执行上下文栈
2. 全局执行上下文初始化
3. 执行checkscope函数，创建checkscope函数执行上下文，checkscope执行上下文被压入执行上下文栈
4. checkscope执行上下文初始化，创建变量对象、作用域链、this
5. checkscope函数执行完毕，checkscope执行上下文从执行上下文栈中弹出
6. 执行f函数，创建f函数执行上下文，f执行上下文被压入执行上下文栈
7. f执行上下文初始化，创建变量对象、作用域链、this
8. f函数执行完毕，f函数上下文从执行上下文栈中弹出

当了解了上述的过程之后，我们会发现一个问题，当f函数执行的时候，checkscope函数上下文已经被销毁了（执行上下文栈中弹出），怎么还能读取到checkscope中的scope的值呢？

当我们了解了具体的执行过程后，我们知道f执行上下文维护了一个作用域链:

fContext={
    Scope: [AO, checkscopeContext.AO, globalContext.VO]
}

就是因为这个作用域链，f函数依然可以读取到checkscopeContext.AO的值，说明当f函数引用了checkscopeContext.AO中的值的时候，即使checkscopeContext被销毁了，但是JavaScript依然迥然checkscopeContext.AO活在内存中，f函数依然可以通过f函数的作用域链找到它，正是因为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

来看看闭包的实现方式：

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]函数的时候，data[0]函数的作用域链为：

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

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

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

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