JavaScript做用域和做用域链

 做用域

做用域就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期，在JavaScript中变量的做用域有全局做用域和局部做用域。

最外层函数定义的变量拥有全局做用域，即对任何内部函数来讲，都是能够访问的：

var outVariable = "我是最外层变量";       //最外层变量 
function outFun() {        //最外层函数 
  var inVariable = "内层变量"; 
  function innerFun() {        //内层函数 
      console.log(inVariable); 
  } 
  innerFun(); 
} 
console.log(outVariable);     //我是最外层变量 
outFun(); //内层变量 
console.log(inVariable);    //inVariable is not defined 
innerFun();     //innerFun is not defined                         

 

<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>

做用域链

 

 在JS中，函数的能够容许嵌套的。即，在一个函数的内部声明另外一个函数，例如

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

 对于A来讲，A函数在执行的时候，会建立其A函数的做用域， 那么函数B在建立的时候，会引用A的做用域，相似下面这样

 

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

 从上面的两幅图中能够看出，函数B在执行的时候，是会引用函数A的做用域的。因此，像这种函数做用域的嵌套就组成了所谓的函数做用域链。

当在自身做用域内找不到该变量的时候，会沿着做用域链逐步向上查找，若在全局做用域内部仍找不到该变量，则会抛出异常。