JavaScript学习（四） —— 作用域、作用域链

因为ES6有了块级作用域，我们还是以ES5为基础。本文结合之前几篇系列文章，讨论和作用域、作用域链有关的问题。

一、 作用域（Scope）

JavaScript（ES5）中的作用域是函数作用域。用C/C++/java还有ES6的块级作用域对比，块级作用域包括了在if判断条件后的大括号中的作用域。

ES6中的块级作用域

// ES6用let定义的变量是块级作用域，花括号外部访问不到
for( let i = 0; i < 5; i++ ){
  console.log(i); // 循环输出 0，1，2，3，4
}
console.log(i); // Uncaught ReferenceError: i is not defined 花括号外部不能访问变量i

ES5中没有块级作用域，变量i会外泄

// ES6用let定义的变量是块级作用域，花括号外部访问不到
for( var i = 0; i < 5; i++ ){
  console.log(i); // 循环输出 0，1，2，3，4
}
console.log(i); // 会输出5

ES5的作用域分全局作用域（Global Scope）和局部作用域（Local Scpoe）。

1.全局作用域（Global Scope）

全局作用域是在任何地方都可以访问到的。
它包括三种情况：

1. 在全局执行上下文中，用var定义的变量：

var global = "global";
function fn(){
  console.log(global); // "global"
}
fn(); 

2. 在某个函数体内没有用var关键字声明的变量

function fn(){
  global = "global"; // fn函数并没有被调用，它内部没有用var关键字声明的变量是全局变量
}
console.log(global); // "global"

3. 定义在window对象中的属性

function fn(){
  console.log(global); // "global"
}
window.global = "global";
fn(); 

2.局部作用域（Local Scpoe）

又称函数作用域，是只有在函数内部可以访问的变量和函数的定义。

function fn(){
  var str = "local";
}
console.log(str); // str is not defined

function fn1(){
  var str = "local";
}
function fn2(){
  console.log(str); // str is not defined
}
fn2()

function fn1(){
  function fn2(){
    var str = "local";
  }
  console.log(str); // str is not defined
}
fn1()

上面几种情况都访问不到变量str，在函数作用域之外的地方str不可访问。

二、 作用域链（Scope Chain）

之前一篇变量对象、活动对象介绍过，函数在被调用时会创建一个执行上下文，这个执行上下文的生命周期有创建阶段和执行阶段。在创建阶段生成了变量对象，在执行阶段变量对象变成了活动对象。现在讨论作用域链的创建。

调用函数时，代码执行到在函数体内访问变量，解释器会先在当前作用域查找该变量，如果找到该变量便取它的值，不再向上一层作用域查找。如果在当前作用域没有找到该变量，会去上一级作用域查找，上级作用域也没有会去上上级作用域找，直到找到为止。

在JS中函数很特殊，它是Function的实例，可以当一个对象使用，它有内部可编程的访问属性，函数内部有一个不可直接访问的属性[[scope]]。[[scope]]包含了该函数被创建时作用域中对象的集合，这个集合被称为函数的作用域链。它决定了哪些对象能被函数访问。

function fn0(){
  var a = 10;
  function fn1(){
    var b = 20;
    function fn2(){
	  console.log( a + b ); // 30
    }
	fn2();
  }
  fn1();
}
fn0();

上面代码在fn2入栈函数调用栈时，在Chrome Sources中Scope的Local中可以看到fn2函数，展开看到[[scope]]属性，里面又看到fn0和fn1两个闭包(Closure)¹，代表两个作用域，里面可以分别看到变量a和b。

图解过程如下

---

1. Chrome V8引擎对于闭包(Closure)的描述是将外层函数定为闭包，这和一些参考书中定义内层函数为闭包有区别，下一篇系列文章将解释闭包。 ↩︎