JS的闭包运行机制v2

Yehger
154 阅读7分钟

前言

建议在了解闭包运行机制之前先了解以下知识

本文删除以及修改了原文的很多不必要或错误的内容，以便帮助读者快速理解，但强烈建议读者阅读一下原文，以加强理解，下附中文以及英文原版。

原文：

一、作用域链

当JavaScript在运行的时候，它需要一些空间来存储变量。我们将这些空间称为作用域对象，你可以把作用域链当作一种规则，作用域链的最顶层永远都存在着一个全局对象(Global Object)，接下来我们用代码来解释下作用域链。

1.简单的栗子

假设我们有这样一段代码

//my_script.js

"use strict"
var foo = 1
var bar = 2

我们在全局环境中创建了两个变量，此时的作用域对象就是全局对象，对照关系如下图

image.png

如图所示，我们在执行栈中有一个执行上下文（myscript.js自身的代码），以及它所引用的作用域对象。全局对象里面还含有很多不同的属性，在这里我们就忽略掉了。

2.稍微复杂一点

接下来，我们看下这段代码

"use strict";
var foo = 1;
var bar = 2;

function myFunc() {
  var a = 1;
  var b = 2;
  var foo = 3;

  console.log("inside myFunc");
}

myFunc();

当myFunc被定义的时候，myFunc的标识符（identifier）就被加到了当前的作用域对象中（在这里就是全局对象），并且这个标识符所引用的是一个函数对象（function object）。函数对象中所包含的是函数的源代码以及其他的属性。其中一个我们所关心的属性就是[[scope]]。[[scope]]所指向的就是函数在定义时的父级作用域对象（在这段代码中也就是全局对象）。

在myFunc函数定义之后执行之前的对象关系如下图：

image.png

温习一下。myFunc所引用的函数对象其本身不仅仅含有函数的代码，并且还含有指向其被创建的时候的作用域对象。这一点非常重要！

当myFunc函数被调用的时候，一个新的作用域对象被创建了。新的作用域对象中包含myFunc函数所定义的变量，以及其参数（arguments）。

所以，当myFunc被执行的时候，对象之间的关系如下图所示: image.png

现在我们就拥有了一个作用域链。当我们试图在myFunc当中访问某些变量的时候，JavaScript会先在其能直接访问的作用域对象（这里就是myFunc() scope）当中查找这个属性。如果找不到，那么就在它的父作用域对象当中查找（在这里就是Global Object）。如果一直往上找，找到没有父作用域对象为止还没有找到的话，那么就会抛出一个异常ReferenceError。

例如，如果我们在myFunc中要访问a这个变量，那么在myFunc scope当中就可以找到它，得到值为1。

如果我们尝试访问foo，我们就会在myFunc() scope中得到3。只有在myFunc() scope里面找不到foo的时候，JavaScript才会往Global Object去查找。所以，这里我们不会访问到Global Object里面的foo。

如果我们尝试访问bar，我们在myFunc() scope当中找不到它，于是就会在Global Object当中查找，因此查找到2。

很重要的是，只要这些作用域对象依然被引用，它们就不会被垃圾回收器（garbage collector）回收，我们就一直能访问它们。当然，当一个作用域对象的最后一个引用被解除的时候，并不代表垃圾回收器会立刻回收它，只是它现在可以被回收了。

所以，当myFunc()执行结束返回的时候，再也没有人引用myFunc() scope了。当垃圾回收结束后，对象之间的关系变成回了调用前的关系。

image.png 接下来，为了图表直观起见，我将不再将函数对象画出来。但是，请永远记着，函数对象里面的[[scope]]属性，保存该函数被定义时的父级作用域对象。

二、嵌套的函数

正如前面所说，当一个函数返回后，没有其他对象会保存对其的引用。所以，它就可能被垃圾回收器回收。但是如果我们在函数当中定义一个嵌套的函数并且返回，且被调用函数的一方所存储呢？（如下面的代码）

function myFunc() {
  return function innerFunc() {
    // ...
  }
}
var innerFunc = myFunc();

你已经知道的是，函数对象中总是有一个[[scope]]属性，保存着该函数定义时的父级作用域对象。所以，当我们在定义嵌套的函数的时候，这个嵌套的函数的[[scope]]就会引用它(父级作用域对象)。

如果我们将这个嵌套的函数返回，并被另外一个地方的标识符所引用的话，那么这个嵌套函数及其[[scope]]所引用的作用域对象（父级作用域对象）就不会被垃圾回收所销毁。

"use strict";

function createCounter(initial) {
  var counter = initial;

  function increment(value) {
    counter += value;
  }

  function get() {
    return counter;
  }

  return {
    increment: increment,
    get: get
  };
}

var myCounter = createCounter(100);

console.log(myCounter.get());   // 返回 100
myCounter.increment(5);
console.log(myCounter.get());   // 返回 105

当我们调用createCounter(100)的那一瞬间(createCounter(100)还处于执行栈中的时候)，对象之间的关系如下图:

image.png

注意increment和get函数都存有指向createCounter(100) scope的引用。如果createCounter(100)没有任何返回值，那么createCounter(100) scope不再被引用，于是就可以被垃圾回收。但是因为createCounter(100)实际上是有返回值的，并且返回值被存储在了myCounter中，所以对象之间的引用关系变成了如下图所示:

image.png

所以，createCounter(100)虽然已经返回(出栈)了，但是它的作用域对象依然存在，仍然可以但仅能被嵌套的函数（increment和get）所访问。

让我们试着运行myCounter.get()。刚才说过，函数被调用的时候会创建一个新的作用域对象，并且该作用域对象的父作用域对象是函数被定义时的父作用域对象。所以，当myCounter.get()被调用时的一瞬间，对象之间的关系如下。

注：这里原文中文版的配图有错误，本文纠正过来了

image.png

调用increment(5)的时候就有点意思了，因为这个函数调用时传入了一个参数：

image.png

如你所见，increment(5)的调用创建了一个新的作用域对象，并且其中含有传入的参数value。当这个函数尝试访问value的时候，JavaScript立刻就能在当前的作用域对象找到它。然而，这个函数试图访问counter的时候，JavaScript无法在当前的作用域对象找到它，于是就会在其父作用域createCounter(100) scope中查找。

由此可见，除了调用myCounter.increment方法之外。几乎没有任何方法可以修改counter这个变量。这就是用闭包实现“私有变量”的方法。

我们注意到initial变量也被存储在createCounter()所创建的作用域对象中，尽管它没有被用到。我们实际上可以去掉var counter = initial;，直接使用initial以节省一些内存。但是为了代码的可读性起见，我们保留代码不变。

三、一些特性

需要注意的是作用域链是不会被复制的。每次函数调用只会往作用域链下面新增一个作用域对象，让我看一个看起来一样的函数，不一样的作用域对象

"use strict";

function createCounter(initial) {
  // ...
}

var myCounter1 = createCounter(100);
var myCounter2 = createCounter(200);

当myCounter1和myCounter2被创建后，对象之间的关系为:

image.png

在上面的例子中，myCounter1.increment和myCounter2.increment的函数对象拥有着一样的代码以及一样的属性值（name，length等等），但是它们的[[scope]]指向的是不一样的作用域对象。

这才有了下面的结果

var a, b;
a = myCounter1.get();   // a 等于 100
b = myCounter2.get();   // b 等于 200

myCounter1.increment(1);
myCounter1.increment(2);

myCounter2.increment(5);

a = myCounter1.get();   // a 等于 103
b = myCounter2.get();   // b 等于 205

结论

    • 闭包是什么？- 它是同时引用函数对象和作用域对象的对象。实际上，所有 JavaScript 函数都是闭包：没有作用域对象就不可能引用函数对象。
    • 闭包是什么时候被创建的？因为所有JavaScript对象都是闭包，因此，当你定义一个函数的时候，你就定义了一个闭包。
  • 闭包是什么时候被销毁的？当它不被任何其他的对象引用的时候。
avatar
文章
阅读
粉丝