JS学习笔记之作用域链

在进入正题前，先看一道面试题，如下：

var a = 1;
function fn1(){
  function fn2(){
    console.log(a);
  }
  function fn3(){
    var a = 4;
    fn2();
  }
  var a = 2;
  return fn3;
}
var fn = fn1();
fn(); //输出多少

看到这些，彻底被绕晕，这尼玛到底什么跟什么，内心顿时一万头草泥马呼啸而过！带着疑问，开始了我的作用域链学习之旅。

执行环境

执行环境定义了变量和函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都存放在这个对象中。

• 全局执行环境是最外围的一个执行环境。宿主环境不同，其执行环境对象也不同。（浏览器：window对象，Node环境：global对象）;
• 每个函数都有自己的执行环境,当程序进入一个函数时，意味着该执行环境被推入到执行环境栈中，函数执行完毕，则从该环境栈中被推出，并将控制权返回给之前的执行环境，
• 某个执行环境中的代码执行完毕后，执行环境会被销毁，保存在变量对象中的函数和变量也一并被销毁（全局执行环境直到应用程序退出，关闭浏览器等操作）。

作用域链

拿上面的面试题举例，其执行环境可用下面的图表示：

作用域链.png

由图可知，执行环境包括：全局环境window、fn1环境、fn2环境、fn3环境，执行流程为：

• 进入全局执行环境，调用fn1,fn指向fn3,调用fn3;
• 进入fn3执行环境，fn3环境不存在fn2,调用上级环境fn1中的fn2;
• 进入fn2执行环境，fn2环境中不存在a，调用上级环境fn1中的a。
  最终执行结果为2。

其他示例

var a = 1;
function fn1(){
  function fn3(){
    var a = 4;
    fn2();
  }
  var a = 2;
  return fn3;
}
function fn2(){
  console.log(a);
}
var fn = fn1();
fn(); //输出多少

执行结果为：1

var a = 1;
function fn1(){

  function fn3(){
    function fn2(){
      console.log(a);
    }
    var a;

    fn2();
    a = 4;
  }
  var a = 2;
  return fn3;
}
var fn = fn1();
fn(); //输出多少

执行结果为：undefined

总结

1. 当访问一个变量或调用某个函数时，首先在当前执行环境中查找是否存在，若存在，则停止作用域链向上搜索；若不存在，则沿着作用域链向父级环境查找，直至全局环境(若全局环境都没找到，则报错)
2. 父级环境不可以向下搜索(即父级作用域无法访问子作用域中的变量或函数)