浅析Javascript闭包的特性

Javascript闭包的定义非常晦涩——闭包，是指语法域位于某个特定的区域，具有持续参照（读写）位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义（或创建）时的值（深连结）。

简单来说，Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量（键值对），而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚，闭包就是“属性表”，闭包就是一个数据块，闭包就是一个存放着“Name=Value”的对照表。就这么简单。但是，必须强调，闭包是运行期概念，一个函数实例。

Javascript闭包的实现，通常是在函数内部再定义函数，让该内部函数使用上一级函数的变量或全局变量。

ECMAScript认为使用全局变量是一个简单的Javascript闭包实例。

 
 
 
  
  
  
var sMessage = "Hello World";   
  
  
  
function sayHelloWorld(){   
  
  
  
alert(sMessage);   
  
  
  
};   
  
  
  
sayHelloWorld(); 
 
 

但它完成没有体现Javascript闭包的特性……

现在比较让人认同的Javascript闭包实现有如下三种

 
 
 
  
  
  
with(obj){   
  
  
  
//这里是对象闭包   
  
  
  
}(function(){      
  
  
  
//函数闭包   
  
  
  
})()try{   
  
  
  
//...   
  
  
  
} catch(e) {   
  
  
  
//catch闭包 但IE里不行   
  
  
  
} 
 
 

附上今天在无忧看到的问题：

要求：

让这三个节点的Onclick事件都能正确的弹出相应的参数。

 
 
 
  
  
  
      
  
  
 id="a1">aa
      
  
  
 id="a2">aa
     
  
  
 id="a3">aa
     
  
  
   
  
  
  
 type="text/javascript">   
  
  
  
     
  
  
 id="a1">aa
     
  
  
 id="a2">aa
     
  
  
 id="a3">aa
     
  
  
   
  
  
  
 type="text/javascript">   
  
  
  
for(var i=1; i < 4; i++){   
  
  
  
var id = document.getElementById("a" + i);   
  
  
  
id.onclick = function(){   
  
  
  
alert(i);//现在都是返回4      
  
  
  
}   
  
  
  
}   
  
  
  
 
 
 

客服果果的解答：

 
 
 
  
  
  
for(var i=1; i < 4; i++){      
  
  
  
var id = document.getElementById("a" + i);     
  
  
  
/*     
  
  
  
这里生成了一个匿名函数并赋值给对象 id_i;     
  
  
  
*/     
  
  
  
id.onclick = function(){          
  
  
  
/*          
  
  
  
这个i来源于局部变量，无法以window.i或者obj.i的形式在后期引用，          
  
  
  
只好以指针或者变量地址方式保存在这个匿名函数中，          
  
  
  
这就是传说的闭包，所以所有这个过程中生成的事件句柄都使用引用          
  
  
  
的方式来持久这个变量，也就是这些匿名函数共用一个变量i;          
  
  
  
*/         
  
  
  
alert(i);      
  
  
  
};   
  
  
  
}; 
 
 

局部变全局

 
 
 
  
  
  
for(var i=1; i < 4; i++){   
  
  
  
var id = document.getElementById("a" + i);     
  
  
  
id.i=i;//这个i有了根     
  
  
  
id.onclick=function(){          
  
  
  
alert(this.i)      
  
  
  
};   
  
  
  
};1.for(var i=1; i < 4; i++){     
  
  
  
var id = document.getElementById("a" + i);    
  
  
  
window[id.id]=i;//这个i有了根    
  
  
  
id.onclick=function(){         
  
  
  
alert(window[this.id]);     
  
  
  
};   
  
  
  
} 
 
 

产生一对一的更多Javascript闭包

 
 
 
  
  
  
for(var i=1; i < 4; i++){    
  
  
  
var id = document.getElementById("a" + i);    
  
  
  
id.onclick = new function(){        
  
  
  
var i2=i;//这个i是闭包的闭包       
  
  
  
return function(){           
  
  
  
alert(i2);       
  
  
  
}     
  
  
  
};   
  
  
  
} 
 
 

【编辑推荐】

1. JavaScript类和继承：prototype属性
2. JavaScript类和继承：this属性
3. ExtJS Grid Tooltip的3+1种实现方式总结
4. JavaScript异步调用框架的链式实现
5. JavaScript异步调用框架的jQuery风格链式调用