JS作用域链

作用域

变量的作用域

变量的作用域有两种：全局变量和局部变量。

• 全局作用域： 最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：

<script>
      var outerVar = "outer";
      function fn(){
         console.log(outerVar);
      }
      fn();//result:outer
   </script>

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

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

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

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

再来看一个代码：

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

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

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

然而，也不能因此草率地将局部作用域定义为：用var声明的变量作用范围起止于花括号之间。 javascript并没有块级作用域 ,那什么是块级作用域?javascript的作用域是相对函数而言的，可以称为函数作用域。

作用域链

在JS中，函数的可以允许嵌套的。即，在一个函数的内部声明另一个函数,类似这样：

function A(){
  var  a=1;
   function B(){  //在A函数内部，声明了函数B，这就是所谓的函数嵌套。
         var b=2;   
   }
}

对于A来说，A函数在执行的时候，会创建其A函数的作用域， 那么函数B在创建的时候，会引用A的作用域，类似下面这样

函数B在执行的时候，其作用域类似于下面这样：

image

从上面的两幅图中可以看出，函数B在执行的时候，是会引用函数A的作用域的。所以，像这种函数作用域的嵌套就组成了所谓的函数作用域链。当在自身作用域内找不到该变量的时候，会沿着作用域链逐步向上查找，若在全局作用域内部仍找不到该变量，则会抛出异常。