JavaScript进阶学习：闭包的写法和用途

什么是闭包

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：
　　1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
　　2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

　　简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

JS中一切都是对象，函数是对象的一种。

闭包的写法：

第一种写法----采用的是给函数添加一些属性：

function Circle(r) {  
      this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  
  return Circle.PI * this.r * this.r;  
}  
  
var c = new Circle(2.0);     
console.log( c.area()  );  

第二种写法----将一个函数当作值赋给变量：

//第2种写法  
var Circle = function() {  
   var obj = new Object();  
   obj.PI = 3.14159;  
     
   obj.area = function( r ) {  
       return this.PI * r * r;  
   }  
   return obj;  
}  
  
var c = new Circle();  
console.log( c.area( 2.0 ) );  

第三种----new 一个对象，然后给对象添加属性和方法

var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  
       return this.PI * r * r;  
}  console.log( Circle.Area( 1.0 ) );  

第四种----直接定义变量，用的比较多

var Circle={  
   "PI":3.14159,  
   "area":function(r){  
          return this.PI * r * r;  
   }  
};  
console.log( Circle.area( 1.0 ) ); 

闭包的用途：

1、匿名自执行函数

除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，比如UI的初始化，那么我们可以使用闭包：

 

2、结果缓存

我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，

那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    
     
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    
     
CachedSearchBox.attachSearchBox("input"); 

3、封装

var person = function(){    
    //变量作用域为函数内部，外部无法访问    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    
     
print(person.name);//直接访问，结果为undefined    
print(person.getName());    
person.setName("abruzzi");    
print(person.getName());    
   
得到结果如下：  
   
undefined  
default  
abruzzi  

4、实现类和继承

function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
};   

    var p = new Person();
    p.setName("Tom");
    console.log(p.getName());

    var Jack = function(){};
    //继承自Person
    Jack.prototype = new Person();
    //添加私有方法
    Jack.prototype.Say = function(){
        console.log("Hello,my name is Jack");
    };
    var j = new Jack();
    j.setName("Jack");
    j.Say();
    console.log(j.getName());

定义了Person，它就像一个类，我们new一个Person对象，访问它的方法。

下面我们定义了Jack，继承Person，并添加自己的方法。

运行结果：

Tom
Hello,my name is Jack
Jack
[Finished in 0.5s]

函数表达式

定义函数的两种方式：一个是函数声明，另一个就是函数表达式。

//1.函数声明写法
function fn2(){
    console.log('函数声明');  
}
//2.函数表达式写法
var fn1 = function(){
    console.log('函数表达式');
}

区别：
1.函数声明是用function后面有函数名，函数表达式是赋值形式给一个变量。
2.函数声明可以提升函数，而函数表达式不会提升

函数提升就是函数会被自动提升到最前方，以至于再调用函数后再声明函数也不会有错：

//例子：
//先调用运行
sayName();
//再声明函数
function sayName(){
    console.log('ry');
}

//运行结果
'ry'

函数表达式就不会被提升：

//先调用
sayBye();
//函数表达式
var sayBye = function(){
    console.log('bye bye');
}

//运行报错

但是下面的写法很危险：因为存在函数声明的提升

//书上代码
if(condition){
    function sayHi(){
        console.log('hi');
    }
}
else{
    function sayHi(){
        console.log('yo');
    }
}

解说一下： 这段代码想表达在condition为true时声明sayHi，不然就另一函数sayHi，但是运行结果往往出乎意料，在当前chrome或firefox可能能做到，但是在IE10以下的浏览器（我测试过）往往不会遵循你的意愿，不管condition是true还是false都会输出yo。

这时函数表达式能派上用场了：

//换成函数表达式，没问题因为不会被提升，只有当执行时才赋值
var sayHi = null;
if(condition){
    sayHi = function (){
        console.log('hi');
    }
}
else{
    sayHi = function sayHi(){
        console.log('yo');
    }
}

闭包

闭包的定义：有权访问另一个函数作用域中的变量的函数

定义中说明了什么是闭包，最常见的形式就是在函数中再声明一个函数。

重点理解这里：

1.闭包能访问外围函数的变量是因为其作用域链中有外围函数的活动对象（这个活动对象即使在外围函数执行完还会存在，不会被销毁，因为被闭包引用着）。

2.闭包是函数中的函数，也就是说其被调用时也创建执行上下文，对于执行上下文这部分可以看看这篇：深入理解js执行--创建执行上下文这篇博客。

理解了上面之后我们再来看闭包的例子：

function a(){
    //a函数的变量
    var val_a = "我是a函数里的变量";
    //声明函数b，b能访问函数a的变量
    function b(){
        console.log(val_a);
    }
    //a函数将b返回
    return b;
}

//全局变量fn，a执行返回了b给fn
var fn = a();
//调用fn，能够在全局作用域访问a函数里的变量
fn();  //我是a函数里的变量

这里fn能够访问到a的变量，因为b中引用着a的活动对象，所以即使a函数执行完了，a的活动对象还是不会被销毁的。这也说明过度使用闭包会导致内存泄漏。

再来个常见的例子（给多个li添加点击事件，返回对于li的下标）：

<body>
    <ul id="list">
        <li>red</li>
        <li>green</li>
        <li>yellow</li>
        <li>black</li>
        <li>blue</li>
    </ul>
</body>

//获得li标签组
var li_group = document.getElementsByTagName('li');

//错误例子:每个li都会跳出5
function fn(){
    //为每一个li添加点击事件
    var i = 0;
    //使用for来给每个li添加事件
    for(;i<li_group.length;i++){
        //添加点击事件
        li_group[i].addEventListener('click',function(){
            // 输出对应得下标
            console.log(i);
        });
    }
}
fn();


//正确的例子：
//在加一层的函数，作为闭包，用来保存每一次循环的i变量，就可以达到目的
function correctFn(){
    var i = 0;
    for(;i<li_group.length;i++){
        //在外面套一层函数，这层函数会保存每次循环的i变量，也就是闭包了。
        (function(num){
            li_group[num].addEventListener('click',function(){
                console.log(num);
            });               
        }(i));        
    }
}
correctFn();

看下面解释之前我默认你已经知道活动对象是什么了，如果不懂可以看这篇：深入理解js执行--创建执行上下文

解释一下：
1.错误的例子:
屡一下思路，每个li都有click执行的函数，每个函数点击后才会执行是吧，那每个click的函数的外层函数是fn这个函数，那这5个click函数都会保存着fn的活动对象，那这个输出的i变量在fn这函数里面，所以当fn执行完后，i的值是5了，因此当每个里触发click的函数的时候输出的也就是5了。
再简单的说：每个li的click事件触发的函数引用的i在同一个活动对象中，所以值都一样。

2.正确执行的例子：
我们就在外层加了一层匿名函数并立即执行(虽然函数被执行了，如果有函数引用着它的活动对象，那其活动对象将不灭)，这时每个li的click函数外层函数是每次循环产生的不同的匿名函数，这匿名也是有活动对象，每个li的click的函数保存着各自的匿名函数的活动对象，num这变量也根据每次循环产生不同的匿名函数传入的i的不同而不同，所以能够输出对应不同的值。