作用域链
初级理解
- 函数在执行过程中，首先从自身函数的局部作用域查找变量
- 如果在函数内部找不到，则在定义此函数的作用域中查找变量
- 依次往上查询，直到全局作用域，如果全局作用域中依然找不到，则报错
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()
- 首先从fn()中执行函数fn3
- fn3()里定义了a=4，然后执行fn2()
- 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
