[JavaScript]ECMA-262-3 深入解析.第五章.闭包

最新推荐文章于 2024-06-07 23:26:45 发布

iamchuancey

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量550

点赞数

分类专栏： web前端 javascript 文章标签： javascript 闭包

web前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

javascript

32 篇文章 0 订阅

订阅专栏

概要

本文将介绍一个在JavaScript经常会拿来讨论的话题 —— 闭包（closure）。闭包其实已经是个老生常谈的话题了；有大量文章都介绍过闭包的内容（其中不失一些很好的文章，比如，扩展阅读中Richard Cornford的文章就非常好），尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的。

正如在此前文章中提到的，这些文章都是系列文章，相互之间都是有关联的。因此，为了更好的理解本文要介绍的内容，建议先去阅读下第二章-变量对象和第三章-闭包。

概论

在讨论ECMAScript闭包之前，先来介绍下函数式编程（与ECMA-262-3 标准无关）中一些基本定义。然而，为了更好的解释这些定义，这里还是拿ECMAScript来举例。

众所周知，在函数式语言中（ECMAScript也支持这种风格），函数即是数据。就比方说，函数可以保存在变量中，可以当参数传递给其他函数，还可以当返回值返回等等。这类函数有特殊的名字和结构。

定义：

函数式参数（“Funarg”） —— 是指值为函数的参数。

如下例子：

function exampleFunc(funArg) {
  funArg();
}

exampleFunc(function () {
  alert('funArg');
});

上述例子中funarg的实参是一个传递给exampleFunc的匿名函数。

反过来，接受函数式参数的函数称为高阶函数（high-order function 简称：HOF）。还可以称作：函数式函数。上述例子中，exampleFunc 就是这样的函数。

此前提到的，函数不仅可以作为参数，还可以作为返回值。这类以函数为返回值的函数称为 _带函数值的函数（functions with functional value or function valued functions）。

(function functionValued() {
  return function () {
    alert('returned function is called');
  };
})()();

可以以正常数据形式存在的函数（比方说：接受函数式参数或者以函数值返回）都称作第一类函数（一般说第一类对象）。在ECMAScript中，所有的函数都是第一类对象。

接受自己作为参数的函数，称为自应用函数（auto-applicative function 或者 self-applicative function）：

(function selfApplicative(funArg) {

  if (funArg && funArg === selfApplicative) {
    alert('self-applicative');
    return;
  }

  selfApplicative(selfApplicative);

})();

以自己为返回值的函数称为自复制函数（auto-replicative function 或者 self-replicative function）。通常，“自复制”这个词用在文学作品中：

(function selfReplicative() {
  return selfReplicative;
})();

在函数式参数中定义的变量，在“funarg”激活时就能够访问了（因为存储上下文数据的变量对象每次在进入上下文的时候就创建出来了）：

function testFn(funArg) {

  // 激活funarg, 本地变量localVar可访问
  funArg(10); // 20
  funArg(20); // 30

}

testFn(function (arg) {

  var localVar = 10;
  alert(arg + localVar);

});

然而，我们知道（特别在第四章中提到的），在ECMAScript中，函数是可以封装在父函数中的，并可以使用父函数上下文的变量。这个特性会引发 funarg问题。

Funarg问题：

在面向堆栈的编程语言中，函数的本地变量都是保存在堆栈上的，每当函数激活的时候，这些变量和函数参数都会压栈到该堆栈上。

当函数返回的时候，这些参数又会从堆栈中移除。这种模型对将函数作为函数式值使用的时候有很大的限制（比方说，作为返回值从父函数中返回）。绝大部分情况下，问题会出现在当函数有自由变量的时候。

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

如下所示：

function testFn() {

  var localVar = 10;

  function innerFn(innerParam) {
    alert(innerParam + localVar);
  }

  return innerFn;
}

var someFn = testFn();
someFn(20); // 30

上述例子中，对于innerFn函数来说，localVar就属于自由变量。

对于采用面向堆栈模型来存储局部变量的系统而言，就意味着当testFn函数调用结束后，其局部变量都会从堆栈中移除。这样一来，当从外部对innerFn进行函数调用的时候，就会发生错误（因为localVar变量已经不存在了）。

而且，上述例子在面向堆栈实现模型中，要想将innerFn以返回值返回根本是不可能的。因为它也是testFn函数的局部变量，也会随着testFn的返回而移除。

为了解决上述问题，就引入了闭包的概念。

闭包

闭包是代码块和创建该代码块的上下文中数据的结合。

让我们来看下面这个例子（伪代码）：

var x = 20;

function foo() {
  alert(x); // 自由变量 "x" == 20
}

// foo的闭包
fooClosure = {
  call: foo // 对函数的引用
  lexicalEnvironment: {x: 20} // 查询自由变量的上下文
};

上述例子中，“fooClosure”部分是伪代码。对应的，在ECMAScript中，“foo”函数已经有了一个内部属性——创建该函数上下文的作用域链。

这里“lexical”是不言而喻的，通常是省略的。上述例子中是为了强调在闭包创建的同时，上下文的数据就会保存起来。当下次调用该函数的时候，自由变量就可以在保存的（闭包）上下文中找到了，正如上述代码所示，变量“z”的值总是10。

对于要实现将局部变量在上下文销毁后仍然保存下来，基于堆栈的实现显然是不适用的（因为与基于堆栈的结构相矛盾）。因此在这种情况下，上层作用域的闭包数据是通过动态分配内存的方式来实现的（基于“堆”的实现），配合使用垃圾回收器（garbage collector简称GC）和引用计数（reference counting）。这种实现方式比基于堆栈的实现性能要低，然而，任何一种实现总是可以优化的：可以分析函数是否使用了自由变量，函数式参数或者函数式值，然后根据情况来决定 —— 是将数据存放在堆栈中还是堆中。

ECMAScript闭包的实现

讨论完理论部分，接下来让我们来介绍下ECMAScript中闭包究竟是如何实现的。这里还是有必要再次强调下：ECMAScript只使用静态（词法）作用域（而诸如Perl这样的语言，既可以使用静态作用域也可以使用动态作用域进行变量声明）。

var x = 10;

function foo() {
  alert(x);
}

(function (funArg) {

  var x = 20;

  // funArg的变量 "x" 是静态保存的，在该函数创建的时候就保存了

  funArg(); // 10, 而不是 20

})(foo);

从技术角度来说，创建该函数的上层上下文的数据是保存在函数的内部属性 [[Scope]]中的。如果你还不了解什么是[[Scope]]，建议你先阅读第四章, 该章节对[[Scope]]作了非常详细的介绍。如果你对[[Scope]]和作用域链的知识完全理解了的话，那对闭包也就完全理解了。

根据函数创建的算法，我们看到在ECMAScript中，所有的函数都是闭包，因为它们都是在创建的时候就保存了上层上下文的作用域链（除开异常的情况）（不管这个函数后续是否会激活 —— [[Scope]]在函数创建的时候就有了）：

var x = 10;

function foo() {
  alert(x);
}

// foo is a closure
foo: <FunctionObject> = {
  [[Call]]: <code block of foo>,
  [[Scope]]: [
    global: {
      x: 10
    }
  ],
  ... // other properties
};

正如此前提到过的，出于优化的目的，当函数不使用自由变量的时候，实现层可能就不会保存上层作用域链。然而，ECMAScript-262-3标准中并未对此作任何说明；因此，严格来说 —— 所有函数都会在创建的时候将上层作用域链保存在[[Scope]]中。

“万能”的[[Scope]]

这里还要注意的是：在ECMAScript中，同一个上下文中创建的闭包是共用一个[[Scope]]属性的。也就是说，某个闭包对其中的变量做修改会影响到其他闭包对其变量的读取：

var firstClosure;
var secondClosure;

function foo() {

  var x = 1;

  firstClosure = function () { return ++x; };
  secondClosure = function () { return --x; };

  x = 2; // 对AO["x"]产生了影响, 其值在两个闭包的[[Scope]]中

  alert(firstClosure()); // 3, 通过 firstClosure.[[Scope]]
}

foo();

alert(firstClosure()); // 4
alert(secondClosure()); // 3

正因为这个特性，很多人都会犯一个非常常见的错误：当在循环中创建了函数，然后将循环的索引值和每个函数绑定的时候，通常得到的结果不是预期的（预期是希望每个函数都能够获取各自对应的索引值）。

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = function () {
    alert(k);
  };
}

data[0](); // 3, 而不是 0
data[1](); // 3, 而不是 1
data[2](); // 3, 而不是 2

上述例子就证明了 —— 同一个上下文中创建的闭包是共用一个[[Scope]]属性的。因此上层上下文中的变量“k”是可以很容易就被改变的。

如下所示：

activeContext.Scope = [
  ... // higher variable objects
  {data: [...], k: 3} // activation object
];

data[0].[[Scope]] === Scope;
data[1].[[Scope]] === Scope;
data[2].[[Scope]] === Scope;

这样一来，在函数激活的时候，最终使用到的k就已经变成了3了。

如下所示，创建一个额外的闭包就可以解决这个问题了：

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = (function _helper(x) {
    return function () {
      alert(x);
    };
  })(k); // 将 "k" 值传递进去
}

// 现在就对了
data[0](); // 0
data[1](); // 1
data[2](); // 2

上述例子中，函数“_helper”创建出来之后，通过参数“k”激活。其返回值也是个函数，该函数保存在对应的数组元素中。这种技术产生了如下效果：在函数激活时，每次“_helper”都会创建一个新的变量对象，其中含有参数“x”，“x”的值就是传递进来的“k”的值。

Funarg和return

另外一个特性是从闭包中返回。在ECMAScript中，闭包中的返回语句会将控制流返回给调用上下文（调用者）。而在其他语言中，比如，Ruby，有很多中形式的闭包，相应的处理闭包返回也都不同，下面几种方式都是可能的：可能直接返回给调用者，或者在某些情况下——直接从上下文退出。

ECMAScript标准的退出行为如下：

function getElement() {

  [1, 2, 3].forEach(function (element) {

    if (element % 2 == 0) {
      // 返回给函数"forEach"，
      // 而不会从getElement函数返回
      alert('found: ' + element); // found: 2
      return element;
    }

  });

  return null;
}

alert(getElement()); // null, 而不是 2

理论与实践

通常，程序员会错误的认为，只有匿名函数才是闭包。其实并非如此，正如我们所看到的 —— 正是因为作用域链，使得所有的函数都是闭包（与函数类型无关：匿名函数，FE，NFE，FD都是闭包），这里只有一类函数除外，那就是通过Function构造器创建的函数，因为其[[Scope]]只包含全局对象。为了更好的澄清该问题，我们对ECMAScript中的闭包作两个定义（即两种闭包）：

ECMAScript中，闭包指的是：

从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。
从实践角度：以下函数才算是闭包：
即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）
在代码中引用了自由变量

闭包的应用

延迟调用：

var a = 10;
setTimeout(function () {
  alert(a); // 10, 一秒钟后
}, 1000);

回调函数：

var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
  // 当数据就绪的时候，才会调用;
  // 这里，不论是在哪个上下文中创建，变量“x”的值已经存在了
  alert(x); // 10
};

封装作用域来隐藏辅助对象（创建“私有变量”）：

var foo = {};

// initialization
(function (object) {

  var x = 10;

  object.getX = function _getX() {
    return x;
  };

})(foo);

alert(foo.getX()); // get closured "x" – 10

模仿块级作用域

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = (function _helper(x) {
    return function () {
      alert(x);
    };
  })(k); // 将 "k" 值传递进去
}

// 现在就对了
data[0](); // 0
data[1](); // 1
data[2](); // 2

总结

本文介绍了更多关于ECMAScript-262-3的理论知识，而我认为，这些基础的理论有助于理解ECMAScript中闭包的概念。

到此，本系列的文章已经结束了，但如果你是最先读到本系列的文章，觉得其中有些讲得不好理解，请阅读我写的另一系列的文章，看完它你就不再困惑了。

这两个系列文章的地址收录在我的这篇文章里厚积薄发—从此再也不用担心闭包问题

参考

此系列文章为翻译原作者Dmitry Soshnikov的系列文章[ECMA-262-3 in detail]。

原文参考地址：ECMA-262-3 in detail. Chapter 6. Closures.

下一篇：总结篇—闭包问题从此再不难

iamchuancey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript]ECMA-262-3 深入解析.第五章.闭包

概要本文将介绍一个在JavaScript经常会拿来讨论的话题 —— 闭包（closure）。闭包其实已经是个老生常谈的话题了；有大量文章都介绍过闭包的内容（其中不失一些很好的文章，比如，扩展阅读中Richard Cornford的文章就非常好），尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的。正如在此前文章中提到的，这些文章都是系列文章，相互
复制链接

扫一扫