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() //输出多少 输出2

1 首先从fn()执行的函数fn3；
2 fn3里面定义了var a=4；然后执行了fn2()
3 fn2()打印了a，但是fn2内部并没有定义a，所以向上一层，在fn1里面寻找到a为2；

经过查找资料得到的理解

gitbook
segmentFault
颜海静博客
汤姆大叔博客

• 一系列活动的执行上下文(EC)形成了栈。栈底是全局上下文，栈顶是活动的当前上下文，压栈、出栈类似数组的pop以及push。
  压栈：全局EC-->局部EC1-->局部EC2-->当前EC
  出栈：全局EC<--局部EC1<--局部EC2<--当前EC
  当js代码被载入浏览器中时，默认进入的是一个全局的执行上下文。挡在全局上下文中调用执行一个函数时，程序流就进入被调用的函数内，此时引擎就会为函数创建一个新的执行上下文，并将其压入到执行上下文堆栈的顶部。浏览器总是执行在当前堆栈顶部的执行上下文，一旦执行完毕，该上下文就会被从当前堆栈弹出，然后，进入其下的上下文执行代码。这样，堆栈中的上下文就会被一次执行并且弹出堆栈，知道回到全局上下文。

var a = 1;

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

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

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

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

结果：

代码结果

• 第4处输出6，然后下面的a=20，将fn2上一层的a赋值为a（并不是全局的）
• 第5处输出1，然后下面的a=200，将fn3上一层（也就是全局）的a赋值为200