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());    
   

 

 

 

 

 

你可能感兴趣的:(js)