浅析作用链域

作用链域

初级理解

• 函数在执行过程中，首先从自身函数的局部作用域查找变量
• 如果在函数内部找不到，则在定义此函数的作用域中查找变量
• 依次往上查询，直到全局作用域，如果全局作用域中依然找不到，则报错

例子

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()

1. 首先从fn()中执行函数fn3
2. fn3()里定义了a=4，然后执行fn2()
3. fn2()打印a，但是fn2里没有定义a，所以再在fn2定义的作用域也就是fn1()的作用域中查询，所以输出a=2

高级理解

一系列活动的执行上下文（EC）形成了栈。栈底是全局上下文，栈顶是活动的当前上下文，压栈、出栈类似数组的pop以及push

• 压栈：全局EC-->局部EC1-->局部EC2-->当前EC
• 出栈：全局EC<--局部EC1<--局部EC2<--当前EC

当JS代码被载入浏览器中时，默认进入的是一个全局的执行上下文。当在全局上下文中调用执行一个函数时，程序流就进入被调用的函数内，此时引擎就会为函数创建一个新的执行上下文，并将其压入到执行上下文堆栈的顶部。浏览器总是执行在当前堆栈顶部的执行上下文，一旦执行完毕，该上下文就会被从当前堆栈弹出，然后，进入其下的上下文执行代码。这样，堆栈中的上下文就会被一直执行并且弹出堆栈，直到回到全局上下文。

var a = 1;

function fn(){
  console.log("1 "+a);
  var a = 5;
  console.log("2 "+a);
  a++;
  var a;
  fn3();
  fn2();
  console.log("3 "+a);

  function fn2(){
    console.log("4 "+a);
    a = 20;
    console.log("8 "+a);
  }
  console.log("9 "+a);
}

function fn3(){
  console.log("5 "+a) 
  a = 200;
  console.log("7 "+a) 
}

fn();
console.log("6 "+a);

输出顺序及结果分析

代码结果

• 1处在fn()内定义了a，但是还没有赋值为5，所以为undefined
• 4处之后给a赋值20，赋值的是fn2()上层的fn()的局部变量
• 5处fn3()输出1，然后给a赋值200，赋值的是fn3上层的全局变量a