JavaScript 闭包理解

MDN 对闭包的理论定义为：

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

什么是自由变量？

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

由此可见闭包公有两部分组成：

闭包 = 函数 + 函数能够访问的自由变量

举个例子：

var a = 1;
function fun() {
  console.log(a);
}
fun();
//fun 函数可以访问a, 但a变量不是fun的参数，也不是fun的局部变量

*为什么此闭包和我们实践的闭包不一样呢？
ECMAScript中，闭包指的是：
从理论角度讲，所有的函数，因为他们都在创建的时候就将上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于在访问自由变量，这个时候使用的是最外层的作用域。
从实践的角度讲

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

实践闭包

《Javascript权威指南》中的例子：

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

首先我们要分析一下这段代码中执行上下文栈和执行上下文变情况。
在《JavaScript深入之执行上下文》中有着非常详细的分析。
简要执行过程：

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

当了解f函数执行的过程，我们应该思考一个问题： chenscope函数明明被弹出了，为什么f函数仍可以获取其局部变量scope的值？
<如果使用者使用的是php, 此段代码将会报错，因为再php中，f函数只能读取到自己作用域和全局作用域的变量>

然而JavaScript是可以的。
其原因是 f 函数在执行上下文时维护了一个作用域链：

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

因为这个作用域链，f函数在checkscopeContext被销毁时仍可以访问checkscopeContext.AO中的值,正是因为java做到了这一点，从而实现了闭包这个概念。

结论：函数内部可以调用自由变量，即使创建它的上下文已销毁仍然可以访问销毁函数的局部变量，从而形成闭包。

经典例子：
非闭包:

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

闭包：

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

最后编辑于：2021.08.10 16:21:38