JavaScript关于作用域、作用域链的理解

作用域

先来谈谈变量的作用域

• 变量的作用域无非就是两种：全局变量和局部变量
• 全局作用域：最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的，看例子：

var outVar = "全局变量";
function fn() {
    console.log(outVar);
}
fn();  //"全局变量"

• 局部作用域：和全局作用域相反，一般只在固定的代码片段内可以访问到，而对于函数外部是无法访问的，最常见的例如函数内部，看例子：

function fn(){
    var innerVar = "inner";
 }
    fn();
   console.log(innerVar);// ReferenceError: innerVar is not defined

需要注意的是，函数内部声明变量的时候，一定要使用var命令，如果不用的话，你实际上是声明了一个全局变量，看例子：

function fn(){
    innerVar = "inner";
 }
  fn();
  console.log(innerVar);// result:inner

再来看一端代码：

      var scope = "global";
      function fn(){
         console.log(scope);//result:undefined
         var scope = "local";
         console.log(scope);//result:local;
      }
      fn();

很有趣吧，第一个输出居然是undefined，原本以为它会访问外部的全局变量(scope=”global”)，但是并没有。这可以算是javascript的一个特点，只要函数内定义了一个局部变量，函数在解析的时候都会将这个变量“提前声明”：

      var scope = "global";
      function fn(){
         var scope;//提前声明了局部变量
         console.log(scope);//result:undefined
         scope = "local";
         console.log(scope);//result:local;
      }
      fn();

然而，也不能因此草率地将局部作用域定义为：用var声明的变量作用范围起止于花括号之间。
javascript并没有块级作用域
那什么是块级作用域？
像在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的，比如下面的c语言代码：

for(int i = 0; i < 10; i++){
//i的作用范围只在这个for循环
}
printf("%d",&i);//error

但是javascript不同，并没有所谓的块级作用域，javascript的作用域是相对函数而言的，可以称为函数作用域：

      for(var i = 1; i < 10; i++){
            //coding
      }
      console.log(i); //10  

作用域链（Scope Chain）

那什么是作用域链？
我的理解就是，根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问。
想要知道js怎么链式查找，就得先了解js的执行环境

执行环境（execution context）：

1. 是js中最为重要的概念，执行环境定义了变量和函数有权访问的其他数据，决定了它们各自的行为。
2. 执行环境，总共有三种，全局环境，和局部环境（函数），eval

变量对象：

1. 每个执行环境，都有一个与之关联的变量对象，执行环境中定义的所有的变量和函数都保存在这个对象中
2. 虽然我们编写的代码无法访问这个对象，但是解析器在处理数据的时候会在回台使用它。

全局执行环境：

1. 是最外围的一个执行环境，根据ECMAScript 实现的所在宿主环境不同，表示执行环境的对象也不一样
2. 在 Web浏览器中，全局执行环境，被认为是window对象，因此所有的全局变量和函数，都是作为window对象的属性和方法创建的；
3. 某个执行环境中的所有代码执行完毕后，该环境销毁，保存在其中所有变量和函数定义也会销毁
4. 全局执行环境直到应用退出（例如关闭网页，或者浏览器时）才会被销毁

环境栈：

1. 每个函数，都有自己的执行环境，当执行流进入一个函数时，函数的环境就会被推入一个环境栈中，而在函数执行之后,栈将其环境弹出，把控制权返回给之前的执行环境，ECMAScript 程序中的执行流正是由这个方便的机制控着

作用域链：

1. 作用域链本质上，是一个指向变量对象的指针列表，它只引用，但不实际包含变量对象
2. 当代码在一个环境中执行时，会创建变量对象的一个作用域链，作用域链的用途，是保证对执行环境有权访问的变量和函数的有序访问，作用域链的前端，始终都是当前执行的代码所在环境的变量对象
3. 如果这个环境是函数，则其活动对象作为变量对象，活动对象，在最开始时只包含一个变量即argumengts对象（这个对象，在全局环境中是不存在的）作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自于下一个包含环境，这样，一直延伸到全局执行环境；
   4.全局执行环境的变量对象，始终都是作用域链中的最后一个对象

标识符的解析：

1. 是沿着作用域链一级一级的搜索标识符的过程，搜索过程始终从作用域链的前端开始，然后逐级地向后回溯，直至找到标识符为止（如果找不到标识符，通常会导致错误发生）

注意：内部环境，可以通过作用域链访问所有的外部环境，但是外部环境不能访问内部环境中的任何变量和函数，这些环境之间的 联系，是线性，有次序的，每个环境都可以向上搜索作用域链，以查询变量和函数名，但是任何环境都不能通过向下搜索作用域链而进入另一个执行环境

举个例子：

   <script>
      var scope = "global"; 
      function fn1(){
         return scope; 
      }
      function fn2(){
         return scope;
      }
      fn1();
      fn2();
   </script>

上面代码执行情况演示：

image.png

了解了环境变量，再详细讲讲作用域链。
当某个函数第一次被调用时，就会创建一个执行环境(execution context)以及相应的作用域链，并把作用域链赋值给一个特殊的内部属性([scope])。然后使用this，arguments(arguments在全局环境中不存在)和其他命名参数的值来初始化函数的活动对象(activation object)。当前执行环境的变量对象始终在作用域链的第0位。
以上面的代码为例，当第一次调用fn1()时的作用域链如下图所示：
（因为fn2()还没有被调用，所以没有fn2的执行环境）

image.png

再来看一段代码：

   <script>
      function outer(){
         var scope = "outer";
         function inner(){
            return scope;
         }
         return inner;
      }
      var fn = outer();
      fn();
   </script>

outer()内部返回了一个inner函数，当调用outer时，inner函数的作用域链就已经被初始化了（复制父函数的作用域链，再在前端插入自己的活动对象），具体如下图：

image.png

一般来说，当某个环境中的所有代码执行完毕后，该环境被销毁（弹出环境栈），保存在其中的所有变量和函数也随之销毁（全局执行环境变量直到应用程序退出，如网页关闭才会被销毁）
但是像上面那种有内部函数的又有所不同，当outer()函数执行结束，执行环境被销毁，但是其关联的活动对象并没有随之销毁，而是一直存在于内存中，因为该活动对象被其内部函数的作用域链所引用。
具体如下图：
outer执行结束，内部函数开始被调用
outer执行环境等待被回收，outer的作用域链对全局变量对象和outer的活动对象引用都断了

image.png