JS 中闭包的深刻理解(结合执行上下文和作用域的内容看一定能看懂)

JS 中闭包的深刻理解

  大部分学习 JS 的初学者总是对闭包、作用域链、执行上下文这些概念搞得云里雾里的，在学习的过程中，我也被困扰过，于是狠下心详细总结整理这份笔记，用于自己复习和给初学者参考。建议先看看执行上下文与作用域再看这部分内容就很容易理解了，个人觉得难点是执行上下文和作用域的理解。整理不易，点赞收藏吧~

  闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。比如前文中写过的 createComparisonFunction() 函数。

function createComparisonFunction(propertyName) {
  return function(object1, object2) {
    let value1 = object1[propertyName];
    let value2 = object2[propertyName];
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
	} 
  };
}

  上述函数的内部匿名函数的第 3、4 行代码中均引用了外部函数的变量 propertyName 。在这个内部函数被返回并在其他地方被使用后，它仍然引用着那个变量。这是因为内部函数的作用域链包含 createComparisonFunction() 函数的作用域。要理解为什么会这样，可以想想第一次调用这个函数时会发生什么。

  理解作用域链创建和使用的细节对理解闭包非常重要。在调用一个函数时，会为这个函数调用创建一个执行上下文，并创建一个作用域链。然后用 arguments 和其他命名参数来初始化这个函数的活动对象。外部函数的活动对象是内部函数作用域链上的第二个对象。这个作用域链一直向外串起了所有包含函数的活动对象，直到全局执行上下文才终止。

  先从一个简单的函数看起：

function compare(value1, value2) {
   if (value1 < value2) {
     	return -1;
   } else if (value1 > value2) {
		return 1;
   } else {
        return 0;
   } 
}
let result = compare(5, 10);

  当在这段代码执行前， JS 引擎会在内存中构建如下的情况：

  进入代码就会创建全局执行上下文，会对代码进行一系列的预处理，包括变量、函数的提升、登记等内容。这里注意，全局执行上下文的文本环境也就是登记变量、函数、类名的地方称之为全局变量对象，其实就是一块存储区域。在这块区域内又分成了全局对象区域和全局scope区，分别登记不同类型的变量名。这块不太情况的可以去看执行上下文的内容里面讲的更加详细。

  函数的定义会创建函数对象，上图中黄色区域，里面的 [[environment]] 记录了创建函数对象时的当前作用域链，在全局下创建的，即指向全局文本环境，即全局变量对象。同时函数名也被记录在全局对象上，并以创建的函数对象的地址赋值，let 声明的变量 result 登记在全局 scope 上，但没有初始化。

  接下来执行代码第10行 result = compare(5, 10); 碰到函数调用，会创建该函数的执行上下文并会赋值创建函数对象时保存的作用域链。然后创建自己存储变量名，函数名的地方，称之为活动对象，将其插到作用域链的前端。所以在这个环境下通过作用域链既可以访问到自己的活动对象里的变量，也可以访问到全局变量对象的内容。

  再来看看这个更复杂一点的情况：

function cCF(propName) {
  return function(object1, object2) {
    let value1 = object1[propName];
    let value2 = object2[propName];
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
	} 
  };
}
let comp = cCF('name');
let result = comp({ name: 'a' }, { name: 'b' });

  当执行代码前会是下面情况：

  执行第14行 cCF() 函数调用，进入cCF() 函数后会赋值创建函数定义时的作用域链，然后创建自己的活动对象用于保存自己变量，并插入作用域链前端。如下图。

  接下来执行函数，是返回一个匿名函数的定义，碰到函数的定义会创建函数对象，并赋值当前的作用域链，保存与函数对象内。这时候这个函数对象的地址 xxx2 就被返回，cCF 函数执行结束，执行上下文退出栈，因为此时 cCF 函数的活动对象有被匿名函数引用，所以不销毁，这里就是形成闭包的关键。接下来就是将 cCF 函数返回的结果 xxx2 赋值给 comp 变量。

  接下来进入第15行代码 result = comp({ name: 'a' }, { name: 'b' }); 调用 comp() 函数，会赋值该函数对象体内保存的作用域链，然后创建自己的活动对象，插入作用域前端。

  如上，在当前执行上下文上，有三个作用域通过作用域链链接，都是可以访问到的。在comp 函数中是可以通过作用域链找到cCF函数的活动对象的，虽然cCF函数已经执行完了，但其活动对象还在作用域链上。于是就可以在comp函数中访问cCF活动对象中的 propName 变量。执行函数内部代码计算返回值为-1返回，退出执行栈，并因为自己的comp 函数活动对象没有被任何其内容引用，因此可以直接销毁。回复当前执行上下文中的指向。并将结果保存到 result 中。