JavaScript闭包详解：原理、实现方式与常见应用场景

JavaScript闭包的定义与本质

闭包的定义往往令人困惑：它是指一个语法域位于特定区域，具备持续读写该区域内自身范围之外执行域中非持久型变量能力的代码块。这些外部执行域的非持久型变量会神奇地保留在闭包最初定义（或创建）时的值（即深连结）。简而言之，闭包就是在另一个作用域中保存了一份从上一级函数或作用域获取的变量（键值对），且这些键值对不会随上一级函数的执行完成而销毁。正如周爱民所言，闭包本质上是一个“属性表”，即一个存放“Name=Value”对照表的数据块。必须强调的是，闭包是一个运行期的概念。

在JavaScript中，闭包（Closure）主要具备两个特点：

它作为函数变量的一个引用，当函数返回时，该引用仍处于激活状态。

一个闭包意味着当函数返回时，其占用的栈区资源并未被释放。

目前较为公认的闭包实现方式主要有以下三种：

 
with(obj){
//这里是对象闭包
} 

 
(function(){
//函数闭包
})() 

 
try{
//... 
} catch(e) {
//catch闭包 但IE里不行
} 

闭包的常见实现方式与示例

几个有用的示例

 
//*************闭包uniqueID*************
uniqueID = (function(){ //这个函数的调用对象保存值
var id = 0; //这是私有恒久的那个值
//外层函数返回一个有权访问恒久值的嵌套的函数
//那就是我们保存在变量uniqueID里的嵌套函数.
return function(){return id++;}; //返回,自加.
})(); //在定义后调用外层函数.
document.writeln(uniqueID()); //0
document.writeln(uniqueID()); //1
document.writeln(uniqueID()); //2
document.writeln(uniqueID()); //3
document.writeln(uniqueID()); //4

 
//*************闭包阶乘*************
var a = (function(n){
if(n<1){ alert("invalid arguments"); return 0; }
if(n==1){ return 1; }
else{ return n * arguments.callee(n-1); }
})(4);
document.writeln(a);

 
function User( properties ) {
//这里一定要声明一个变量来指向当前的instance
var objthis = this;
for ( var i in properties ) {
(function(){
//在闭包内，t每次都是新的，而 properties[i] 的值是for里面的
var t = properties[i];
objthis[ "get" + i ] = function() {return t;};
objthis[ "set" + i ] = function(val) {t = val;};
})(); 
} 
} 
//测试代码
var user = new User({
name: "Bob",
age: 44
}); 
alert( user.getname());
alert( user.getage());
user.setname("Mike");
alert( user.getname());
alert( user.getage());
user.setage( 22 );
alert( user.getname());
alert( user.getage());

利用闭包解决DOM事件绑定问题

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

要求：

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

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

 <!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" />  <h1>javascript闭包 by 司徒正美</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul> 

我的解释是，onclick的绑定函数 function(){alert(i)}的作用域为对应li对象，它里面alert的i的作用域为window，每次循环都是在重写window.i的值，因此循环完，i已是4，点击哪一个li元素都是4。

解决方法：

使用函数闭包。

 
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
lists[i].onclick = (function(i){//保存于外部函函数
return function(){
alert(i);
} 
})(i);
} 

 
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
lists[i].onclick = new function(){
var t = i;
return function(){
alert(t+1)
} 
} 
} 

 <!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" />  <h1>javascript闭包 by 司徒正美（函数闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul> 

利用事件代理

 
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function(){
var e = arguments[0] || window.event,
target = e.srcElement ? e.srcElement : e.target;
if(target.nodeName.toLowerCase() == "li"){
alert(target.id.slice(-1))
} 
} 

 <!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" />  <h1>javascript闭包 by 司徒正美（事件代理）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul> 

将暂时变量保留于元素节点上。

 
var lists = document.getElementsByTagName("li");
for(var i=0,t=0,el; el = list[i++];){
el.i = t++
el.onclick = function(){
alert(this.i)
} 
} 

 <!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" />  <h1>javascript闭包 by 司徒正美（将临时变量变成某一个对象的属性）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul> 

使用with语句造成的对象闭包。

 
var els = document.getElementsByTagName("li")
for(var i=0,n=els.length;i<n;i++){
with ({i:i})
els[i].onclick = function() { alert(this.innerHTML+i) };
} 

 <!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" />  <h1>javascript闭包 by 司徒正美（对象闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul> 

使用try...catch语句构造的异常闭包：

 
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
try{
throw i;
}catch(i){
lists[i].onclick = function(){
alert(i)
} 
} 
} 

 <!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" />  <h1>javascript闭包 by 司徒正美（异常闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul> 

 
var els = document.getElementsByTagName("li");
(''+Array(els.length+1)).replace(/./g,function(a,i){
els[i].onclick=function(){alert(i)}
})