【javascript基础】八、闭包

前言

函数和做用域啥的咱们前面已经了解了，如今就要学习闭包了，这是一个挺晦涩的知识点，初学者可能会感受很差理解，可是高手都不不觉得然了，高手就给我提点意见吧，我和新手一块儿来学习什么是闭包。

例子

先不说定义，先看一个题，看看你们能得出正确的结果不，

function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
        arr[i] = function(){
            return i;
        }
    }
    return arr;
}

var fns = test();
console.log(fns[9]()); // 值是多少？
console.log(fns[0]());//值是多少？

结果就是

10
10

View Code

你作对了吗？

 

什么是闭包

咱们知道，javascript中的变量做用域分为全局变量和局部变量，全局的变量咱们在什么地方均可以使用，可是局部变量就不是这样的了，咱们只能在该变量的做用域中获得，换句话说就是咱们在函数的内部可使用函数外部的变量，可是咱们在函数的外部却不能使用函数内部定义的局部变量，可是在实际中咱们就是想要在函数的外部使用函数内部定义的变量那该怎么办呢?例子来了

function test(){
  var inner = 10;
}
alert(inner);//error?咋办

咋办呢？咱们知道，在内部咱们能够访问到这个变量，咱们还知道有一个操做符return能够返回想要的值，那我就在内部定义一个函数来访问这个变量，而后在返回这个函数不就好了，实践一下

function test(){
  var inner = 10;
  function inFun(){
    alert(inner);//
  };
   return inFun;
}
var outter = test();
outter();//10; 

咱们作到了，为本身鼓鼓掌，有时候咱们就该不断鼓励本身一下，不要给本身太大的压力，咱们不是富二代，在不鼓励一下本身怎么能成为富二代他爹呢。

这就是闭包了，官方没有给出闭包一个完整的准确的定义，民间流传的是在一个函数内定义一个函数，而且这个内部函数能够在外面访问，这时候就造成了闭包。看看上面函数的结构，一个函数返回了一个内部函数，咱们知道在正常状况下，一个函数执行结束以后，里面的变量会被释放，也就是说，在test()这句执行以后，里面的inner应该被释放了才对，可是咱们发现，outter()时咱们拿到了inner的值，这就是闭包的特性：若是闭包中使用了局部的变量，那么这个变量会一直贮存在内存中，闭包会一直保持这个值，一直到外部的函数没有被引用为止，看例子

function closure(){
  var num = 0;
  function add(){
    console.log(++num);
  }
  return add;  
}
var test1  = closure();//造成一个闭包，保持着本身的一个num变量
test1  ();//1
test1  ();//2
var test2 = closure();//又一个闭包，保持了一个本身的num变量
test2 ();//1
test2 ();//2

好玩不？这就是闭包的神奇的地方，也是让身为初学者的咱们感到彷徨的地方，相信我，我会让大家理解明白的。要想释放num占用的内存，就该这样

test1 = null;
test2 = null;

简单解析下这个例子：在执行 var test1 = closure()时，因为closure()返回到是一个函数，这里就至关于test1变量指向了一个函数add，可是这个add函数有本身的做用域和活动对象，都存在了test1中，执行test1()时，会寻找num变量，因为闭包存储了该变量就能够直接取到，而且自加1，再一次执行test1()时会继续在test1执行的add函数的执行环境和做用域中查找，发现num为1了，就找到了这个num；在执行var test2 = closure()时，会从新建立一个闭包，从新存储执行环境和活动对象，因此这是和第一次彻底没有关系的。

闭包的机制

1. 函数也是对象，有[[scope]]属性（只能经过JavaScript引擎访问），指向函数定义时的执行环境上下文。

2. 假如A是全局的函数，B是A的内部函数。执行A函数时，当前执行环境的上下文指向一个做用域链。做用域链的第一个对象是当前函数的活动对象（this、参数、局部变量），第二个对象是全局window。

3. 当执行代码运行到B定义地方， 设置函数B的[[scope]]属性指向执行环境的上下文做用域链。

4. 执行A函数完毕后，若内部函数B的引用没外暴，A函数活动对象将被Js垃圾回收处理；反之，则维持，造成闭包。

5. 调用函数B时，JavaScript引擎将当前执行环境入栈，生成新的执行环境，新的执行环境的上下文指向一个做用域链，由当前活动对象+函数B的[[scope]]组成，链的第一个对象是当前函数的活动对象（this、参数、局部变量组成），第二个活动对象是A函数产生的，第三个window。

6. B函数里面访问一个变量，要进行标志符解析（JavaScript原型也有标识符解析），它从当前上下文指向的做用域链的第一个对象开始查找，找不到就查找第二个对象，直到找到相关值就当即返回，若是还没找到，报undefined错误。

7. 当有关A函数的外暴的内部引用所有被消除时，A的活动对象才被销毁。

这段是其余的地方的，就是说了执行环境和做用域的理解闭包怎么维持变量的。

闭包的应用

一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中，这既是函数也是弊端。咱们能够利用闭包封装一些私有的属性，例如

var factorial = (function () {
    var cache = [];
    return function (num) {
        if (!cache[num]) {
            if (num == 0) {
                cache[num] = 1;
            }
            cache[num] = num * factorial(num - 1);
        }
        return cache[num];
    }
})();

封装了一个内部私有的属性来缓存结果。

下面流行的模块模式，它容许你模拟公共，私有以及特权成员

var Module = (function(){
    var privateProperty = 'foo';

    function privateMethod(args){
        //do something
    }

    return {

        publicProperty: "",

        publicMethod: function(args){
            //do something
        },

        privilegedMethod: function(args){
            privateMethod(args);
        }
    }
})();

另外一个类型的闭包叫作当即执行函数表达式，是一个在window上下文中自我调用的匿名函数：

(function(window){

    var a = 'foo';

    function private(){
        // do something
    }

    window.Module = {

        public: function(){
            // do something 
        }
    };

})(this);

 

闭包的弊端

因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。闭包会在父函数外部，改变父函数内部变量的值。因此，若是你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时必定要当心，不要随便改变父函数内部变量的值。

解释例子

回到开始的例子，这是闭包的经典的例子，这个和其余的例子和有些不同，咱们分析一下，这里用了一个数组，其实这里咱们执行一次var fns = test()，造成了10个闭包，数组的每个项存了一个闭包，这与其余的例子是不同的，其余的例子是函数执行一次造成了一个闭包，因此这个10个闭包的初始的执行环境是同样的，每个闭包使用了i这个变量，这个变量在函数var fns = test()执行以后变为了退出循环的那个i的值10，JavaScript是解释型的语言，因此在执行数组中的闭包的时，会找到此时i的值10;看看arr的结果

如今想怎样解决这个问题呢？咱们想一想，这10个闭包造成时的执行环境和活动对象是同样的，如今考虑的就是要在初始时就不同，咱们知道函数的做用域是一层一层的，那咱们就须要在这之间家一层做用域，这层做用域要有不一样的i的值，咱们想到了自执行匿名函数，(funciton(){})()，咱们把i的值穿进去，按值传参就是至关于复制了一份变量嘛，在(funciton(){})()外部的做用域中的i的值的改变不会改变内部的i的值，试一下

function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
      (function(i){ arr[i] = function(){return i;}})(i);
    }
    return arr;
}

var fns = test();
console.log(fns[9]()); // 值是9
console.log(fns[0]());//值是0            

固然也能够这样

function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
     
    arr[i] = (function(i){return function(){return i}})(i);
    }
    return arr;
}

var fns = test();
console.log(fns[9]()); // 值是9
console.log(fns[0]());//值是0 

这两个的实质都是在闭包造成以前，给每个闭包包上一层做用域，在这个做用域中传一个参数，是每个闭包上一级的做用域中都有不一样的i。固然还有其余的办法这里不说了。

小结

闭包的应用场景挺多的，在模块化编程中很重要的，有些地方说函数也是闭包，仍是那就话，概念不重要，理解会用才是最现实的。