Javascript Closures (2)

Tom5 2009-05-18

展开全文

Javascript Closures (2)

03月 17th, 2009 — Dreamer

在上一篇文章中，简单介绍了下闭包(closure)和原型链，现在继续来研究闭包的内部机制。

对了，所有的东西都参考自这篇文章：Javascript Closures

执行环境（Execution Context）

执行环境（Execution Context）是 ECMAScript 定义中的一个抽象概念，用来定义 ECMAScript 执行时所需要的一些行为。所有的 JS 代码都是在一个执行环境中被执行的，全局的代码是在一个全局的执行环境中执行的，而对函数的每次调用都会产生一个相应的执行环境。

当一个函数被调用的时候，就会进入到一个执行环境中，当另外一个函数被调用（或者同一个函数被递归调用）的时候就会进入到一个新的执行环境，而且当这个函数返回的时候，就会回到原来的执行环境中。所以，运行中的 JS 代码会有一个执行环境堆栈。

当一个执行环境被创建的时候，会发生一系列的事情。首先，它会创建一个 “Activation” 对象，不过这个对象很特别，因为它没有 prototype 并且不能在代码中直接引用。然后就会创建一个叫做 “arguments” 类似数组的对象，里面保存了传过来的参数，同时”Activation” 对象上会创建一个叫做 “arguments” 的属性并指向刚刚创建的 “arguments”对象。

接下来，执行环境就会被赋予一个作用域（scope）。一个作用域一般是由一系列的对象组成的，每个函数对象都有一个内部的 [[scope]] 属性，该属性也是由一系列的对象组成的。执行环境被赋予的那个 scope 就会被相应函数对象中的[[scope]] 属性所引用，同时会把开始创建的 “Activation” 对象插入到 scope 包含对象的最前面。

然后，就会使用ECMA 262提到的一个 “Variable” 对象进行变量初始化。事实上，前面创建的 “Activation” 对象和这里的”Variable” 对象其实是同一个对象。初始化的时候会在 “Variable” 对象上创建一些和函数定义中的参数同名的属性，如果有传过来的参数，就会把传过来的值赋给 “Variable” 对象上相应的属性（不然就赋值undefined）。如果有内部函数，那么就会创建一个函数对象，然后在 “Variable” 对象上创建一个和内部函数名字相同的属性，并把刚创建的函数对象赋值给它。变量初始化的最后一步就是在 “Variable” 对象上创建和函数内部的声明的本地变量同名的所有属性。

其实在变量初始化的时候，所有本地变量对应的 “Variable” 对象上的属性值都是 undefined，它们并没有被真正初始化。只有当执行到函数体内对它们赋值的语句的时候，它们才算是真正初始化了。

正是由于 “Activation” 对象和 “Variable” 对象其实是同一个对象，所以在代码中，”Activation” 对象上的 “arguments” 属性就可以像本地变量那样被引用。

最后，会对this关键字赋一个值。如果this被赋值为一个对象，那么以this.为前缀的所有属性都是指该对象上的属性，如果this 被赋值为 null ，那么它就指向 global 对象。

全局的执行环境相对于函数的执行环境来说，有那么一点不同。因为全局执行环境不需要参数，所以它也就不需要创建一个 “Activation” 对象来引用它们。全局执行环境也有一个 scope，不过它的 scope只包含一个对象，就是 global对象。它也会经过变量初始化，而且 global 对象会充当其中的 “Variable” 对象，这就是为什么在全局作用域声明的函数和变量都会作为 global 对象的属性。全局的执行环境中，this关键字指向的也是 global 对象。

scope 链和 [[scope]] 属性

要了解 scope 链，首先需要了解的就是内部的 [[scope]] 属性。在ECMAScript 中，所有的函数都是对象，在执行函数声明或者表达式的时候会创建函数对象，它们也可以通过构造函数 Function 被创建。

在通过构造函数Function 来创建函数对象的时候，这个函数对象内部的 [[scope]] 属性总是指向一个只包含了global对象的scope链。通过声明或者表达式创建的函数对象内部的[[scope]]属性则指向其所在的执行环境的scope 链。

比如下面两段代码：

1
2
3

function exampleFunction(formalParameter)
{ ... // function body code 
}

1
2
3

var exampleFuncRef = function(){ 
... // function body code 
}

虽然写法有点不同，函数对象创建的时间也不同，但是由于它们所处的都是全局的执行环境，所以它们内部的[[scope]] 属性指向的scope 链只包含一个 global 对象。

内部函数有一些不同，因为它们是在函数内部定义的，所以执行环境就不是全局执行环境，scope链上的对象就比较多。看一下下面的代码：

function exampleOuterFunction(formalParameter){ 
    function exampleInnerFuncitonDec(){ 
        ... // inner function body 
    } 
... // the rest of the outer function body. 
} 
 
exampleOuterFunction( 5 );

对于内部函数exampleInnerFuncitonDec()来说，当外部函数被调用的时候，就创建了一个新的执行环境和相应的 Activation/Variable 对象，所以它内部的[[scope]]属性就指向了当前的scope链：包含了当前执行环境的Activation 对象以及外部函数的 [[scope]] 上的global对象。

由此我们看到，代码的逻辑和结构会自动控制 scope 链的创建。不过ECMAScript提供了一个 with 语句，使用它可以更改scope 链。

函数声明不会受到 with 语句的影响，因为它们在变量初始化的时候就已经创建相应的函数对象了，但是函数表达式可以，看下面的代码：

var y = {x:5};
function exampleFuncWith(){ 
var z; 
   with(y){ 
      z = function(){ 
          ... // inner function expression body; 
      } 
    } 
... 
}

由于使用了 with 语句，在函数执行的时候，内部函数 z 的 [[scope]] 属性指向的 scope 链的前面又会插入一个 y 对象，变成： y对象->当前执行环境的Activation对象->global对象。

接下来看一下标识符定位的问题。当代码运行的时候如果发现了某个标识符，就会在scope链中的对象上寻找与它对应的变量，从第一个开始依次找，如果找到就返回，不然就一直找到 scope 链的末尾。由于函数被调用的时候会创建新的执行环境，就会把相应的Activation/Variable 对象插入到 scope 链的前面，所以对于函数体中的标识符，总是会先检查是否有相对应的内部函数、参数或者本地变量。
=============
以上是自己学到的一些东西，如果有不对的地方，欢迎拍砖。