转载

理解 Javascript 作用域和作用域链

上篇文章在介绍 Javascript 闭包的时候提到了“闭包创建时所处的环境信息”，但是并没有说明这些信息到底是什么。

也多亏了读者的提醒，我对于 Js 闭包的理解还是太肤浅了。这篇文章除了介绍 Js 的作用域和作用域链外，我还会讨论变量提升(var hositing) 这个问题。

Javascript 作用域

在 Javascript 中，只有局部作用域和全局作用域。而只有函数可以创建局部作用域，像 if，for 或者 while 这种块语句是没办法创建作用域的。（当然 ES6 提供了 let 关键字可以创建块作用域。）

Javascript 的这种特性导致 for 循环里面创建闭包时会产生让人意想不到的结果。比如下面这个例子：

var i = 20; var makeLogger = function() {     var funcs = [];     for(var i = 0; i < 10; ++i){         funcs[i] = function() {             console.log(i);         }     }     return funcs; }  var loggers = makeLogger(); for(var i = 0; i < 10; ++i){     loggers[i](); }

RESULTS:

上面的输出结果，大致原因就是 for 循环里面的变量的作用域是整个函数的，循环内部创建的一系列闭包引用的是同一个变量 i，而在 for 循环结束后，这个 i 的值变成了 10。所以当我们调用这些内部函数的时候，就会输出 10 了。

现在这样讲可能还是不够清楚，在我们了解作用域链和 Javascript 的执行原理后，就更容易理解了。

Javascript 作用域链

当 Js 里面声明一个函数的时候，会给该函数对象创建一个 scope 属性，该属性指向当前作用域链对象。
当 Js 里面调用一个函数的时候，会创建一个执行上下文，这个执行上下文定义了函数解释执行时的环境信息。每个执行上下文都有自己的作用域链，主要用于变量标识符的解析。
在 Js 引擎运行一个函数的时候，它首先会把该函数的 scope 属性添加到执行上下文的作用域链上面，然后再创建一个 活动对象 添加到此作用域顶端共同组成了新的作用域链。活动对象包含了该函数的所有的形参，arguments 对象，所有的局变变量等信息。
当解释执行函数的每一条语句的时，会依据这个执行上下文的作用域链来查找标识符，如果在一个作用域对象上面没有找到标识符，则会沿着作用链一直向上查找，这一点类似于 Js 的原型继承的属性查找机制。

让我们来看几个具体的例子：

var name = 'zilongshanren'; function echo() {     console.log(name);     var name = 'hello';     console.log(name); }  echo();

RESULTS:

undefined hello

要理解上面的代码的输出结果，我们可以按照上面提到的 4 点来解释：

在声明 echo 函数时，此时的作用域链是（我们假设 scope chain 是一个作用域对象数组）

[[scope chain]] = [ {      global Object: {           name: 'zilongshanren'           ...      } } ]

echo 函数的作用域属性指向此 scope chain 对象。

当调用 echo 函数时，会创建一个执行上下文，同时把 echo 的作用域添加到执行上下文的作用域链上。同时创建一个活动对象并添加到该作用域链的顶端。此时的作用域链是：

[[scope chain]] = [ {     Active Object {          name: undefined,          arguments: ...          ...     },      global Object: {           name: 'zilongshanren'           ...      } } ]

当解释执行函数的第一条语句的时候，查找 name 变量，在活动对象中找到了，于是输出 undefined。然后执行 var name = 'hello'，此时变量 name 的值为 hello。最后解释执行 console.log(name)的时候就输出了 hello.

这个例子可能比较简单，因为它没有使用闭包。

我们接下来分解一下本文开头的例子。

当定义 makeLogger 函数时，makeLogger 函数的作用域为：

[[scope chain]] = [ {      global Object: {           i: 20,           ...      } } ]

在 for 循环里面定义闭包函数的时候，此时的作用域链是：

[[scope chain]] = [ {      makeLogger local scope object : {         i: undefined,         funcs: [],      },      global Object: {           i: 20,           ...      } } ]

并且此时 funcs…funcs的 scope 都指向该 scope chain。

当调用 makeLogger 函数的时候，创建一个执行上下文。把 makeLogger 函数的作用域链加到执行上下文中，并且创建一个活动对象添加到作用域链的顶端，此时的 scope chain 为：

[[scope chain]] = [ {      makeLogger active object： {           funcs: undefined,           i: undefined,           arguments: ...      },      global Object: {           i: 20,           ...      } } ]

当执行完 makeLogger 函数的时候，此时的作用域对象变成了：

[[scope chain]] = [ {      makeLogger local scope object : {         i: undefined,         funcs: [function object ...],      },      global Object: {           i: 20,           ...      } } ]

这里的 funcs 函数还会生成闭包对象，它包含了 makeLogger 局部作用域的变量的值，即 i=10.

下图是 V8 引擎中 funcs 函数及其闭包的截图：

理解 Javascript 作用域和作用域链

最后遍历执行所有的 loggers 的时候，会依次为每一个 loggers 函数创建一个执行上下文，每一个执行上下文的作用域链为：

[[scope chain]] = [ {      loggers function active object : {          arguments: ...      },      makeLogger local scope object : {         i: 10,         funcs: [function object ...],      },      global Object: {           i: 20,           ...      } } ]

当执行 loggers 函数的 console.log(i)的时候，它会沿着此时的作用域链进行变量查找，于是找到了 i=10. 所以我们输出的结果就是 10.

变量提升

我们看一个例子：

var name = 'zilongshanren'; function echo() {     name = "hello";     console.log(name);     var name;     console.log(name); } console.log(name);  echo();