加州提子面包

闭包

发表于 | 更新于 | 分类于 ， | | 共 874 字 | 阅读 次

[TOC]

定义

闭包 是指有权访问另一个函数作用域中的变量的函数。

创建闭包的方式

常见方式

在一个函数内部创建另外一个函数，演示如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function createComparisonFunction(propertyName) {
  return function(object1, object2) {
    var value1 = object1[propertyName];
    var value2 = object2[propertyName];
    
    if (value1 < value2) {
      return -1
    } else if (value1 > value2) {
      return 1
    } else {
      return 0;
    }
  }
}

代码中三四行代码所在的匿名函数可以访问外部函数也就是 createComparisonFunction 的变量 propertyName 。

作用域链

本质是指向变量对象的指针列表，它只引用但不实际包含变量对象。

包含：本地活动对象和全局变量对象。

当某个函数被调用的时候，会创建一个执行环境以及对应的作用域链。然后，使用 argument 和其他命名参数值来初始化函数的活动对象。但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，······直至作为作用域终点的全局执行环境。

一个例子

1
2
3
4
5
6
7
8
9
10
11
function compare(value1, value2) {
  if (value1 < value2) {
    return -1;
  } else if (value1 > value2) {
    return 1;
  } else {
    return 0;
  }
}
var result = compare(5, 10);

解释：定义了一个 compare() 函数，然后又在全局作用域中调用了它。当调用 compare() 的时候，会创建一个包含 arguments 、 value1 和 value2的活动对象。全局执行环境的变量对象（包含 result 和 compare ）在 compare() 执行环境的作用域链中则处于第二位。如下图所示。

函数执行的作用域链

作用域链小结

一般说来，在函数中访问一个变量的时候，就会从作用域链中搜索具有相应名字的变量。一般情况下，局部活动对象就会被销毁，内存中仅保存着全局作用域。但是，闭包有所不同。

闭包小结

在另一个函数的内部定义的函数会将包含函数（即外部函数）的活动对象添加到它的作用域链中。

函数执行的作用域链

匿名函数从 createComparisonFunction() 中被返回之后，它的作用域链被初始化为包含 createComparisonFunction() 函数的活动对象和全局变量对象。匿名函数可以访问 createComparisonFunction() 中定义的所有变量。更重要的是， createComparisonFunction() 函数执行完毕后，期活动对象不会被销毁，因为匿名函数的作用域链仍然在引用这个活动对象。

换句话说，createComparisonFunction() 函数返回后，其执行环境的作用域链会被销毁，但它的活动对象仍然留在内存中；直到匿名函数被销毁后， createComparisonFunction() 的活动对象才会被销毁。

提示： 闭包会携带包含它的函数的作用域，会比其他函数占用更多的内存。过多的使用闭包可能会导致内存占用过高。

闭包与变量

闭包只能取得包含函数中任何变量的最后一个值。

一个🌰

1
2
3
4
5
6
7
8
9
10
11
function createFunction() {
  var result = [];
  
  for (var i=0; i < 10; i++) {
    result[i] = function() {
      return i;
    }
  }
  
  return result;
}

表面上每个函数会返回自己的索引值。其实，每个函数都会返回10.

这是因为每个函数的作用域链中都保存着 createFunction() 函数的活动对象，所以它们引用的都是同一个变量 i 。

假如要想达到预期，应该如下修改代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
function createFunction() {
  var result = [];
  
  for (var i=0; i < 10; i++) {
    result[i] = function(num) {
      return function() {
        return num;
      };
    }(i);
  }
  
  return result;
}
------ 本文结束 ------