Javascript 闭包

• 本文部分摘录自Javascript高级程序设计（第三版）

什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。

代码分析

function createComparisonFunction(propertyName) {
  return function (object1, object2) {
    let value1 = object1[propertyName]; // （1）
    let value2 = object2[propertyName]; // （2）

    return value1 < value2 ? -1 : (value1 > value2 ? 1 : 0);
  }
}
复制代码

(1)(2)这两行代码是内部函数（一个匿名函数）中的代码，这两行代码访问了外部函数中的变量 propertyName。即使这个内部函数被返回了，而且是在其他地方被调用了，但它仍然可以访问变量propertyName。之所以还能够访问这个变量，是因为内部函数的作用域链中包含createComparisonFunction()的作用域。

要彻底搞清楚其中的细节，必须从理解函数第一次被调用的时候都会发生什么入手。

当某个函数第一次被调用时，会创建一个执行环境（execution context）及相应的作用域链，并把作用域链赋值给一个特殊的内部属性（即[[Scope]]）。然后，使用this、arguments和其他命名参数的值来初始化函数的活动对象（activation object）。但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，......直至作为作用域链终点的全局执行环境。

在另一个函数内部定义的函数会将包含函数（即外部函数）的活动对象添加到它的作用域链中。因此，在createComparisonFunction()函数内部定义的匿名函数的作用域链中，实际上将会包含外部函数createComparisonFunction()的活动对象。

下图展示了当下列代码执行时，包含函数与内部匿名函数的作用域链。

// 创建函数
let compareNames = createComparisonFunction("name");

// 调用函数
let result = compareNames({ name: "Nicholas" }, { name: 'Greg' });

// 解除对匿名函数的引用（以便释放内存）
compareNames = null;
复制代码

在匿名函数从createComparisonFunction()中被返回后，它的作用域链被初始化为包含createComparisonFunction()函数的活动对象和全局变量对象。这样，匿名函数就可以访问在createComparisonFunction()中定义的所有变量。更为重要的是，createComparisonFunction()函数在执行完毕后，其活动对象也不会被销毁，因为匿名函数的作用域链仍然在引用这个活动对象。换句话说，当createComparisonFunction()函数返回后，其执行环境的作用域链会被销毁，但它的活动对象仍然会留在内存中；直到匿名函数被销毁后，createComparisonFunction()的活动对象才会被销毁。

闭包应用场景

闭包的一个应用场景是模块定义。 下面代码将操作方法暴露给外部，而细节隐藏在模块内部。

function module() {
  let arr = [];

  function add(val) {
    arr.push(val);
  }

  function get(index) {
    if (index >= 0 && index < arr.length) {
      return arr[index];
    }
    return null;
  }

  return {
    add,
    get
  }
}

let mod = module();
mod.add(1);
mod.add(2);
mod.get(1);
复制代码

一个应用场景是即时调用函数表达式（immediately-invoked function expressions, IIFEs）

var funcs = [];

for (var i = 0; i < 10; i++) {
  funcs.push((function (value) {
    return function () {
      console.log(value);
    }
  }(i)));
}

funcs.forEach(function (func) {
  func(); // outputs 0, then 1, then 2, up to 9
});
复制代码

注意事项

由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多。

转载于:https://juejin.im/post/5c82541e6fb9a049d7487d60