JavaScript执行环境和作用域(链)的那些事

执行环境

什么是执行环境

提起作用域，我们不得不说说什么是执行环境。执行环境定义了变量或函数有权访问的其他数据，并决定其各自的行为。每一个执行环境都有一个对应的变量对象，这个对象的作用就是保存在环境中定义的变量和函数（这个变量对象我们无法直接使用）。

全局执行环境

在JavaScript中window对象表示的是全局执行环境，全局执行环境是最外围的环境，所有的全局变量和函数都是作为window对象的属性和方法的。这个执行环境在浏览器关闭时才进行销毁，也就是说window执行环境的生命周期贯穿整个浏览器显示。

执行流和环境栈

当然并不是只有window执行环境，每一个函数都有自己的执行环境，这些执行环境中所有代码执行完后，该环境被销毁。我们都知道，js中程序是以流形式执行的，当执行流执行到一个函数的时候，这个函数的执行环境会被推送到一个环境栈中，在函数执行完毕后，栈中的这个执行环境会被弹出并把控制权交个之前调用函数的执行环境。

环境栈

怎么理解上文我们提到的环境栈（执行环境栈）。在逻辑上执行流依次进入的执行环境形成了一个栈，这个栈的底部永远都是全局执行环境，栈的顶部则是出于当前活动状态的执行环境，执行流执行到一个函数时会把这个函数的执行环境压到栈顶中，结束后弹出，这样做的原因其实就是JavaScript的解释器是单线程的，也就是说在一个时刻只能做一件事，其他等待执行的上下文会在栈中等待。

ECMAStack = [];
(function foo(i) {
    if(i == 3)
        return console.log("The current FunctionContext is finished");
    else
        foo(++i);
})(1);

我们用ECMAStack表示执行环境栈。foo函数被执行了三次，分别是i=1/2/3,每次调用的时候都会创建一个上下文压到栈中，最后控制权交给栈底的全局执行环境，当i==3时，当前栈中的状态应该是：

ECMAStack =
    [
    //栈顶
    FunctionContext - foo(3);
    FunctionContext - foo(2);
    FunctionContext - foo(1);
    WindowContext
    //栈底
    ]

作用域

变量的作用域

在js中变量的作用域有两种：全局变量和局部变量。且所有的变量声明是通过var来定义(ES6中新增了let)。

使用var声明的变量将会自动被添加到最接近的环境中，全局变量被理解为window对象的属性和方法，而局部变量只能在相对应的环境中使用

var gla = 'window';
function f() {
    var bsc = 'local';
    console.log(bsc);
}

console.log(gla);
f();
console.log(bsc);

这里需要注意的是：

1.在定义变量的时候如果去掉前面的var，那么局部变量将会升级为全局变量。

2.局部变量的优先级高于同名的全局变量。即如果在函数中也定义了一个变量名为gla的变量，在函数中使用的时候，输出的应该是这个局部变量的值。

这两点的原因也会在作用域链中体现。

作用域和声明提前

首先我们需要注意的是，在js中没有块级作用域这一说，再其他语言中，有花括号“{}”封闭的代码块都有自己的作用域，作用域外无法使用作用域内定义的变量，因为作用域在执行完成里面的内容后会被销毁。我们可以看下面的代码:

if(true) {
    var test = 'test';
}
console.log(test);
//输出:test

在js中,if语句中的变量声明会将变量添加到当前的执行环境中去，所以在js中使用for循环时要注意（ES6中对于变量定义新增了let,可以解决这个问题）

for(var i = 0 ; i < 3 ; i++) {
    //alert(i)
}
console.log(i);
//输出:3

下面我们来理解变量的声明提前。函数作用域就是：变量在声明他们的函数体以及这个函数体嵌套的任意函数体内都是有定义的（出自：《JavaScript高级程序设计》）。

我们可以理解为变量在声明之前就可以使用，这种特性叫做声明提前。js程序在正是执行之前，会将所有var声明的变量和function声明的函数预读到所在作用域的顶部，对于var声明只是将声明提前，赋值仍然在原位置，function声明，会将函数名称和函数体都提前，而且先预声明变量在预定义函数。

console.log(a);  //输出：undefined

var a = 'test';

console.log(a); //输出：test

//上面的代码实际变成了这样：
var a;
console.log(a);
a = 'test';
console.log(a);

作用域链

当代码在环境中执行时，会创建变量对象的一个作用域链。

作用域链的作用是保证对执行环境有权访问所有变量和函数的有序访问。

在作用域链的前端始终都是当前执行的代码所在的执行环境的变量对象（这个环境如果是函数，会把它的活动对象作为变量对象，活动对象最开始只包含一个变量，也就是arguments对象），作用域链中的下一个变量对象来自外部包含环境，在下一个变量对象时来自下一个包含环境一直延伸到全局执行环境，即全局执行环境始终都是作用域链的最后一个对象。

var test = 'test';
function f() {
    if(test == 'test') {
        test = 'shanlei';
    }
    else {
        test = 'test';
    }
}

f();
console.log('test is now: '+ test);

//输出：test is now: shanlei

变量名的解析的过程实际就是沿着作用域链一层一层搜索标识符的过程，开始是从作用域链的前端进行，然后逐级向后直至找到为止。

例如：在上面这个小例子中函数f()的作用域上有两个对象，一个是自己的变量对象，一个就是全局环境的变量对象，当在函数中使用test变量时会先从作用域链的前端，也就是当前执行环境寻找，没有找到，会往后倒全局执行环境中寻找，而test变量是在全局执行环境中定义的，所以会在全局执行环境中找到这个变量（如果没有找到，证明这个标识符未被定义，浏览器会抛出Uncaught ReferenceError）。

再看一个例子：

var test = 'test';
function f() {
    var anotherTest = 'another';
    function f2() {
        var tempTest = 'temp';
        anotherTest = test;
        test = tempTest;

        //这里可以访问test和anotherTest和tempTest
    }
    //这里可以访问test和anotherTest，不能访问tempTest

    f2();
}

//这里只能访问test
f();

通过上面的例子可以说明，内部环境可以通过作用域访问所有的外部环境，但是外部环境不能访问内部环境中的任何变量和函数，每个环境都可以向上搜索作用域链，但任何环境都不能通过向下搜索作用域链而进入另一个环境。这样也就解释了上面我们所说的如果局部环境中存在同名的标识符，那么会覆盖全局变量。

以上~~~