JavaScript - 执行环境和作用域链

引言

对于刚接触这门语言的人来说，js的作用域常常让人感到混乱，此文用于加深对Javascript语言中执行环境和作用域的理解，部分语句取自《JavaScript高级程序设计》一书。

---

执行环境(execution context)

• 这是JavaScript中非常重要的一个概念，它决定了一个变量或函数可以访问的其他数据。
• 每个函数都有自己的执行环境。执行流机制：执行到某个函数时，该函数的环境会被推入环境栈中，该函数结束后，栈将其环境推出，把控制权交还给之前的执行环境。
• 每个执行环境都有自己的变量对象(variable object)，环境中定义的所有变量和函数都保存在这个变量对象中。但此我们无法访问这个变量对象，解析器处理时会在后台用到它。

作用域链(scope chain)

• 当代码在一个环境中执行时，会创建改执行环境下变量对象的一个作用域链，用于保证对该执行环境有权访问的所有变量和函数的有序访问。
• 每个作用域链的前端，都是当前执行环境的变量对象。如果这个执行环境是一个函数，则将其活动对象(activation object)作为变量对象，每个活动对象在刚被创建时（也就是函数里什么都还没写的时候），会包含一个名为arguments的类数组（array-like）对象，它包含了传入这个函数的参数。
• 作用域链前端的下一级变量对象来自外部包含环境，再下一个变量对象来自再下一个外部包含环境......一直延伸到全局执行环境window。这就是它被称为链的原因。

作用域链 简易图示

延长作用域链

• 指临时将某执行环境的变量对象添加到当前作用域链的前端，在代码执行后被移除。
• 两种方式：with语句 和 try-catch语句中的catch部分。因不是本文重点并且相对简单，一笔带过，感兴趣的同学可以去google一下。

没有块级作用域

• JavaScript没有我们在其它类C语言里习以为常的块级作用域，也就是以花括号为单位的作用域。在JavaScript里，你可以理解为它使用了函数作用域。
• 使用var声明的变量会被添加到最近的一个执行环境中。
• 举三个例子

if(true) {
      var color = 'blue';
}
alert(color); // it will alert 'blue', rather than undefined

for(var i = 0; i < 10; i++) {
      // do something here
}
alert(i); // it will alert 10

 function add(num1, num2) {
     var sum = num1 + num2;
     return sum;
 }
 var result = add(10, 20); // result is 30
 alert(sum); // ReferenceError: sum is not defined

• 由此可以看出，if, for ... 块级作用域内定义的变量会被添加到最近的上一级执行环境的变量对象，而函数内定义的变量则会直接添加到该函数的执行环境的变量对象，随着函数的结束而消失。

对象内的作用域

• 看下方代码示例（对象obj位于全局window下）

var obj = {
  a: this, // 此处this为指向window
  b: function() {
       alert(this); // 此处this指向obj
     } 
};

• 若对象内的函数被用作callback，并且此函数内部用到了this来获取对象内部信息，则需要在添加此函数为callback function时使用bind(this)来改变函数内部的this变量，不然callback会使其内部this指向绑定这个callback的对象的constructor。

ES6 let 声明变量

• ECMAScript 6(es2015) 中新添加了let声明变量的方式，这种方式使得JavaScript获得了块级作用域的实现。
• 推荐大家去查资料了解并使用let，我会在以后腾出时间补上这一块的内容。