JavaScript 做用域 与 做用域链

做用域

任何程序设计语言都有做用域的概念，简单的说，做用域就是变量与函数的可访问范围，即做用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的做用域有全局做用域和局部做用域两种

JS中的做用域是基于上下文，以函数划分的，而不是由块（block）划分的

• 全局做用域

  • 最外层函数和在最外层函数外面定义的变量拥有全局做用域

  以下：

  var a = 111;   // 全局变量 做用域：函数内外都能访问
  function f(){
    	  var b = 666;  //局部变量
  }
  复制代码

  • 全部未定义直接赋值的变量自动声明为拥有全局做用域

  以下：

  var a = 111;   // 全局变量 做用域：函数内外都能访问
  function f(){
        var b = 666;	//局部变量
        c = 777;	//全局变量
  }
  复制代码

  • 全部window对象的属性拥有全局做用域

    通常状况下，window对象的内置属性都都拥有全局做用域，例如window.name、window.location、window.top等等

• 局部做用域

和全局做用域相反，局部做用域通常只在固定的代码片断内可访问到，最多见的例如函数内部，因此在一些地方也会看到有人把这种做用域称为函数做用域 （如上述代码中，函数 f 内部就被称为局部做用域）

(若是想了解更多，请参考个人JavaScript函数变量的使用)

做用域链

了解完做用域后，接下来就要说咱们的做用域链了

• 什么是做用域链？
  大概就是根据在内部函数能够访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问。

若是想要知道JS怎么链式查找，就必须先要了解JS的执行环境

执行环境（execution context）

每一个函数运行时都会产生一个执行环境，js为每个执行环境关联了一个变量对象。环境中定义的全部变量和函数都保存在这个对象中。

全局执行环境是最外围的执行环境，全局执行环境被认为是window对象，所以全部的全局变量和函数都做为window对象的属性和方法建立的。

js的执行顺序是根据函数的调用来决定的，当一个函数被调用时，该函数环境的变量对象就被压入一个环境栈中。而在函数执行以后，栈将该函数的变量对象弹出，把控制权交给以前的执行环境变量对象。

例如：

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

上面代码执行状况以下图所示：

了解了环境变量，就下来再详细讲讲做用域链。

当某个函数第一次被调用时，就会建立一个执行环境(execution context)以及相应的做用域链，并把做用域链赋值给一个特殊的内部属性([scope])。而后使用this，arguments(arguments在全局环境中不存在)和其余命名参数的值来初始化函数的活动对象(activation object)。当前执行环境的变量对象始终在做用域链的第0位。

以上面的代码为例，当第一次调用fn1()时的做用域链以下图所示（由于fn2()尚未被调用，因此没有fn2的执行环境）：

能够看到fn1活动对象里并无scope变量，因而沿着做用域链(scope chain)向后寻找，结果在全局变量对象里找到了scope，因此就返回全局变量对象里的scope值。

标识符解析是沿着做用域链一级一级地搜索标识符地过程。搜索过程始终从做用域链地前端开始，而后逐级向后回溯，直到找到标识符为止（若是找不到标识符，一般会致使错误发生）

做用域链地做用不只仅只是为了搜索标识符

再来看一段代码：

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

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

通常来讲，当某个环境中的全部代码执行完毕后，该环境被销毁（弹出环境栈），保存在其中的全部变量和函数也随之销毁（全局执行环境变量直到应用程序退出，如网页关闭才会被销毁）

可是像上面那种有内部函数的又有所不一样，当outer()函数执行结束，执行环境被销毁，可是其关联的活动对象并无随之销毁，而是一直存在于内存中，由于该活动对象被其内部函数的做用域链所引用。

具体以下图：

outer执行结束，内部函数开始被调用
outer执行环境等待被回收，outer的做用域链对全局变量对象和outer的活动对象引用都断了

像上面这种内部函数的做用域链仍然保持着对父函数活动对象的引用，就是闭包(closure)

---

闭包

闭包有两个做用：

1. 能够读取自身函数外部的变量（沿着做用域链寻找）
2. 让这些外部变量始终保存在内存中

可是它也存在缺陷，可能产生内存泄漏(可是如今通常浏览器能够解决这种问题)

关于第二点，举个例子说明：

<script>
      function outer(){
         var result = new Array();
         for(var i = 0; i < 2; i++){//注：i是outer()的局部变量
            result[i] = function(){
               return i;
            }
         }
         return result;//返回一个函数对象数组
         //这个时候会初始化result.length个关于内部函数的做用域链
      }
      var fn = outer();
      console.log(fn[0]());//result：2
      console.log(fn[1]());//result：2
</script>
复制代码

返回结果很出乎意料吧，你确定觉得依次返回0，1，但事实并不是如此

来看一下调用fn0的做用域链图：

能够看到result[0]函数的活动对象里并无定义i这个变量，因而沿着做用域链去找i变量，结果在父函数outer的活动对象里找到变量i(值为2)，而这个变量i是父函数执行结束后将最终值保存在内存里的结果。

由此也能够得出，js函数内的变量值不是在编译的时候就肯定的，而是等在运行时期再去寻找的。

那怎么才能让result数组函数返回咱们所指望的值呢？
看一下result的活动对象里有一个arguments，arguments对象是一个参数的集合，是用来保存对象的。 那么咱们就能够把i当成参数传进去，这样一调用函数生成的活动对象内的arguments就有当前i的副本。

改进以后：

<script>
      function outer(){
         var result = new Array();
         for(var i = 0; i < 2; i++){
            //定义一个带参函数
            function arg(num){
               return num;
            }
            //把i当成参数传进去
            result[i] = arg(i);
         }
         return result;
      }
      var fn = outer();
      console.log(fn[0]);//result:0
      console.log(fn[1]);//result:1
</script>
复制代码

虽然的到了指望的结果，可是又有人问这算闭包吗？调用内部函数的时候，父函数的环境变量还没被销毁呢，并且result返回的是一个整型数组，而不是一个函数数组！
确实如此，那就让arg(num)函数内部再定义一个内部函数就行了：
这样result返回的实际上是innerarg()函数

<script>
      function outer(){
         var result = new Array();
         for(var i = 0; i < 2; i++){
            //定义一个带参函数
            function arg(num){
               function innerarg(){
                  return num;
               }
               return innerarg;
            }
            //把i当成参数传进去
            result[i] = arg(i);
         }
         return result;
      }
      var fn = outer();
      console.log(fn[0]());
      console.log(fn[1]());
</script>
复制代码

当调用outer，for循环内i=0时的做用域链图以下：

由上图可知，当调用innerarg()时，它会沿做用域链找到父函数arg()活动对象里的arguments参数num=0.
上面代码中，函数arg在outer函数内预先被调用执行了，对于这种方法，js有一种简洁的写法

function outer(){
         var result = new Array();
         for(var i = 0; i < 2; i++){
            //定义一个带参函数
            result[i] = function(num){
               function innerarg(){
                  return num;
               }
               return innerarg;
            }(i);//预先执行函数写法
            //把i当成参数传进去
         }
         return result;
}
复制代码

---

^_<