js 闭包的使用

 

 

1 初始化dom元素 ，在页面加载的时候只执行一次，不在被调用 

 

var datamodel = {
	    table : [],    
	    tree : {}    
};
	

(function(dm){
	alert("22222222222");
    for(var i = 0; i < dm.table.rows; i++){
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
          // drawCell(i, j);    
       }    
    }    
       
    //build dm.tree      
})(datamodel); 

 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] = dsid+"测试";//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return cache[dsid];          
       },    
     
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    
     
var result = CachedSearchBox.attachSearchBox("input22");   
alert(result);

 3 封装，因为闭包结果又引用，引用中用到了闭包中的变量，使得闭包变量得以长久保存 

   这个例子实现了对name这个变量的封装，只能依靠方法来访问。

var person = function(){    
    //变量作用域为函数内部，外部无法访问    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    

console.log(person.name);//直接访问，结果为undefined    
console.log(person.getName());    
person.setName("abruzzi");    
console.log(person.getName());    
   

 4 闭包实现面向对象，不同对象有不同的变量与状态 

   原理：1 中的闭包，是一个匿名函数，只被调用一次， 而 2中的闭包把匿名函数给一个变量引用，使得内部状态可以常驻内存  

            在4中则闭包创建为一个有名称的函数，每次调用则可以创建单独的闭包变量，则可以创建多个 ，每一个可以看成一个对象 。 

   

function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
};    
     
     
var john = Person();    
console.log(john.getName());    
john.setName("john");    
console.log(john.getName());    
     
var jack = Person();    
console.log(jack.getName());    
jack.setName("jack");    
console.log(jack.getName());