JS的执行环境及作用域

执行环境

定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个变量对象中，但是我们编写代码不能访问这个变量对象，解析器在处理数据时会在后台使用它。

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

活动对象：对象中包含了，当前函数可访问的变量及函数；变量对象，最开始包含的对象是参数的arguments对象，然后是在函数中定义的其他变量及方法。

function fn(name){
    var text = "test";
}
// 变量对象中包含：命名函数fn变量、参数name、内部变量test

执行流和环境栈

每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行后，栈将其弹出，把控制权返回给之前的执行环境。即某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数也随之销毁。

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

作用域链

1. 产生：当代码在一个环境中执行时，会创建变量对象的一个作用域链。或者：当定义有多个变量对象嵌套，这些变量对象就组成了作用域链。
2. 用途：保证对执行环境有权访问的所有变量和函数有序访问。
3. 与变量对象之间的关系：函数的作用域链包括它本身的变量对象以及包裹它的外层和直到全局作用域的所有变量对象。
4. 如果该环境是一个函数，它的变量对象就是该函数的活动对象。活动对象最开始只包含一个变量，即arguments对象（在全局环境中是不存在的）。下一个变量对象来自外部环境，而再下一个变量对象则来自下一个外部环境。这样一直延续到全局执行环境。
5. 作用域链的前端始终都是当前执行代码所在环境的变量对象。全局执行环境的变量对象始终都是作用域链中的最后一个对象。

ECMAStack = [];
(function foo(i) {
    if(i == 3){
        return i;
    }
    else{ 
        foo(++i);
    }
})(1);

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

ECMAStack =[
            //栈顶
            foo(3)
            foo(2)
            foo(1)
            Window
            //栈底
            ]

---

执行环境和作用域是一回事吗？

作用域和执行环境是两个完全不同的概念，一般从两者的作用来区别：

• 执行环境可以理解为是this的值，在函数被调用时才生成；
• 作用域是相对于函数来讲的，只有函数才能形成新的作用域。作用域在函数声明时就定义好了。作用域里声明的变量和函数，外部无法访问，除非使用闭包。

---

延长作用域链

当执行流进入到以下任何一个语句中，作用域链就会得到加长：

1. try-catch语句的catch块
2. with语句

这两个语句都会在作用域链的前端临时增加一个变量对象。对于with语句来说，会将指定对象添加到作用域链中。对于catch语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。

function buildUrl(){
    var qs = "?debug=true";  
    with(location){
        var url = href + qs;
    }
    return url;
}

with语句接收的是location对象，因此其变量对象中就包含了location对象的所有属性和方法。而这个变量对象被添加到了作用域链的前端。函数中定义了一个变量qs。当在with语句中引用变量href时（实际时location.href），可以在当前执行环境的变量对象中找到。当引用qs时，引用的是在build中定义的那个变量，而该变量位于函数环境的变量对象中。至于with语句内部，则定义了一个名为URL的变量，因而URL就成了函数执行环境的一部分。所以可以作为函数的值被返回。

---

没有块级作用域

在其他类C语言中，由花括号封闭的代码块都有自己的作用域（执行环境），因而支持根据条件来定义变量。比如：

if(true){
    var c= 1;
}
alert(c);

在其他类C语言中，if语句执行完后，c被销毁。但是在js中，if语句中的变量声明会将变量添加到当前执行环境中。使用for语句时尤其要牢记这一差异。

对于有块级作用域的语言来说，for语句初始化变量的表达式所定义的变量，只会存在于循环的环境中。而对js来说，由for语句创建的变量即使在循环结束后，依然存在于循环外部的环境之中。

1. 声明变量：var声明的变量，自动添加到最接近的环境中。未使用var声明的变量，自动添加到全局环境中。
2. 查询标识符：当在某个环境为了读写而引用一个标识符时，必须通过搜索来确定该标识符实际代表什么。搜索过程从作用域链前端开始向上逐级查询与给定名字匹配的标识符。如果在局部环境中找到就停止搜索。如果在局部环境中未找到，则继续沿作用域链向上搜索，一直追溯到全局环境的变量对象。如果在全局环境中也未找到该标识符，则说明该变量尚未声明。

---

块级作用域

ES6的出现解决了JS中没有块级作用域这一情况：

let：声明一个作用域被限制在块级中的变量、语句或表达式。let声明的变量只能在其声明的块或子块中使用的。这一点相似于var。var声明的变量的作用域是整个封闭函数，这一点区别于let。

function range() {
  var str1 = 'abcdefg';
  let str2 = 'uvwxyz';

  for(var i = 0; i < 3; i++){
    console.log(str1);
  }
  console.log(i); //3

  for(let j = 0; j < 3; j++){
    console.log(str2)
  }
  console.log(j); //j is not defined
}

本文参考资源：《JavaScript高级程序设计（第3版）》