javascript的閉包介紹(司徒正美)
更新時(shí)間：2011年09月15日 15:27:33 作者：
今天又在無憂看到閉包的使用了，整理一下閉包的東西。
閉包的定義非常晦澀——閉包，是指語法域位于某個(gè)特定的區(qū)域，具有持續(xù)參照（讀寫）位于該區(qū)域內(nèi)自身范圍之外的執(zhí)行域上的非持久型變量值能力的段落。這些外部執(zhí)行域的非持久型變量神奇地保留它們在閉包最初定義（或創(chuàng)建）時(shí)的值（深連結(jié)）。簡單來說，閉包就是在另一個(gè)作用域中保存了一份它從上一級函數(shù)或作用域取得的變量（鍵值對），而這些鍵值對是不會(huì)隨上一級函數(shù)的執(zhí)行完成而銷毀。周愛民說得更清楚，閉包就是“屬性表”，閉包就是一個(gè)數(shù)據(jù)塊，閉包就是一個(gè)存放著“Name=Value”的對照表。就這么簡單。但是，必須強(qiáng)調(diào)，閉包是一個(gè)運(yùn)行期概念。
在Javascript中閉包(Closure)，有兩個(gè)特點(diǎn)：
作為一個(gè)函數(shù)變量的一個(gè)引用 - 當(dāng)函數(shù)返回時(shí)，其處于激活狀態(tài)。
一個(gè)閉包就是當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)沒有釋放資源的棧區(qū)。
現(xiàn)在比較讓人認(rèn)同的閉包實(shí)現(xiàn)有如下三種
with(obj){
//這里是對象閉包
}
(function(){
//函數(shù)閉包
})()
try{
//...
} catch(e) {
//catch閉包 但I(xiàn)E里不行
}
幾個(gè)有用的示例
//*************閉包uniqueID*************
uniqueID = (function(){ //這個(gè)函數(shù)的調(diào)用對象保存值
var id = 0; //這是私有恒久的那個(gè)值
//外層函數(shù)返回一個(gè)有權(quán)訪問恒久值的嵌套的函數(shù)
//那就是我們保存在變量uniqueID里的嵌套函數(shù).
return function(){return id++;}; //返回,自加.
})(); //在定義后調(diào)用外層函數(shù).
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 ) {
//這里一定要聲明一個(gè)變量來指向當(dāng)前的instance
var objthis = this;
for ( var i in properties ) {
(function(){
//在閉包內(nèi)，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());
附上今天在無憂看到的問題：
要求：
讓這三個(gè)節(jié)點(diǎn)的Onclick事件都能正確的彈出相應(yīng)的參數(shù)。
<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);//現(xiàn)在都是返回4
}
}
</script>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我的解釋是，onclick的綁定函數(shù) function(){alert(i)}的作用域?yàn)閷?yīng)li對象，它里面alert的i的作用域?yàn)閣indow，每次循環(huán)都是在重寫window.i的值，因此循環(huán)完，i已是4，點(diǎn)擊哪一個(gè)li元素都是4。
解決方法：
使用函數(shù)閉包。
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
lists[i].onclick = (function(i){//保存于外部函函數(shù)
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)
}
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
利用事件代理
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))
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
將暫時(shí)變量保留于元素節(jié)點(diǎn)上。
var lists = document.getElementsByTagName("li");
for(var i=0,t=0,el; el = list[i++];){
el.i = t++
el.onclick = function(){
alert(this.i)
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
使用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) };
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
使用try...catch語句構(gòu)造的異常閉包：
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)
}
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
var els = document.getElementsByTagName("li");
(''+Array(els.length+1)).replace(/./g,function(a,i){
els[i].onclick=function(){alert(i)}
})
在Javascript中閉包(Closure)，有兩個(gè)特點(diǎn)：
作為一個(gè)函數(shù)變量的一個(gè)引用 - 當(dāng)函數(shù)返回時(shí)，其處于激活狀態(tài)。
一個(gè)閉包就是當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)沒有釋放資源的棧區(qū)。
現(xiàn)在比較讓人認(rèn)同的閉包實(shí)現(xiàn)有如下三種
復(fù)制代碼 代碼如下:
with(obj){
//這里是對象閉包
}
復(fù)制代碼 代碼如下:
(function(){
//函數(shù)閉包
})()
復(fù)制代碼 代碼如下:
try{
//...
} catch(e) {
//catch閉包 但I(xiàn)E里不行
}
幾個(gè)有用的示例
復(fù)制代碼 代碼如下:
//*************閉包uniqueID*************
uniqueID = (function(){ //這個(gè)函數(shù)的調(diào)用對象保存值
var id = 0; //這是私有恒久的那個(gè)值
//外層函數(shù)返回一個(gè)有權(quán)訪問恒久值的嵌套的函數(shù)
//那就是我們保存在變量uniqueID里的嵌套函數(shù).
return function(){return id++;}; //返回,自加.
})(); //在定義后調(diào)用外層函數(shù).
document.writeln(uniqueID()); //0
document.writeln(uniqueID()); //1
document.writeln(uniqueID()); //2
document.writeln(uniqueID()); //3
document.writeln(uniqueID()); //4
復(fù)制代碼 代碼如下:
//*************閉包階乘*************
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);
復(fù)制代碼 代碼如下:
function User( properties ) {
//這里一定要聲明一個(gè)變量來指向當(dāng)前的instance
var objthis = this;
for ( var i in properties ) {
(function(){
//在閉包內(nèi)，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());
附上今天在無憂看到的問題：
要求：
讓這三個(gè)節(jié)點(diǎn)的Onclick事件都能正確的彈出相應(yīng)的參數(shù)。
復(fù)制代碼 代碼如下:
<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);//現(xiàn)在都是返回4
}
}
</script>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我的解釋是，onclick的綁定函數(shù) function(){alert(i)}的作用域?yàn)閷?yīng)li對象，它里面alert的i的作用域?yàn)閣indow，每次循環(huán)都是在重寫window.i的值，因此循環(huán)完，i已是4，點(diǎn)擊哪一個(gè)li元素都是4。
解決方法：
使用函數(shù)閉包。
復(fù)制代碼 代碼如下:
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
lists[i].onclick = (function(i){//保存于外部函函數(shù)
return function(){
alert(i);
}
})(i);
}
復(fù)制代碼 代碼如下:
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)
}
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
利用事件代理
復(fù)制代碼 代碼如下:
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))
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
將暫時(shí)變量保留于元素節(jié)點(diǎn)上。
復(fù)制代碼 代碼如下:
var lists = document.getElementsByTagName("li");
for(var i=0,t=0,el; el = list[i++];){
el.i = t++
el.onclick = function(){
alert(this.i)
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
使用with語句造成的對象閉包。
復(fù)制代碼 代碼如下:
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) };
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
使用try...catch語句構(gòu)造的異常閉包：
復(fù)制代碼 代碼如下:
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)
}
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
var els = document.getElementsByTagName("li");
(''+Array(els.length+1)).replace(/./g,function(a,i){
els[i].onclick=function(){alert(i)}
})
您可能感興趣的文章:
- javascript深入理解js閉包
- 深入理解Javascript閉包 新手版
- Javascript閉包演示代碼小結(jié)
- JavaScript 匿名函數(shù)（anonymous function）與閉包（closure）
- JavaScript閉包 懂不懂由你反正我是懂了
- JavaScript 高級篇之閉包、模擬類,繼承（五）
- Javascript 閉包引起的IE內(nèi)存泄露分析
- JavaScript中的作用域鏈和閉包
- 深入Javascript函數(shù)、遞歸與閉包(執(zhí)行環(huán)境、變量對象與作用域鏈)使用詳解
- javascript閉包傳參和事件的循環(huán)綁定示例探討
- 詳談JavaScript 匿名函數(shù)及閉包
- JavaScript閉包詳解
- javascript 閉包詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平時(shí)間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了ES6中的數(shù)組擴(kuò)展方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
js 采用delete實(shí)現(xiàn)繼承示例代碼
這篇文章主要介紹了js如何采用delete實(shí)現(xiàn)所謂的繼承，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-05-05
JS獲取鍵盤上任意按鍵值的實(shí)例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JavaScript建立在一些非常好的想法和少數(shù)非常壞的想法之上。2009-08-08
這篇文章主要介紹了JS模擬鍵盤打字效果的方法,涉及javascript鼠標(biāo)事件及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
javascript單例模式的簡單實(shí)現(xiàn)方法
這篇文章主要介紹了javascript單例模式的簡單實(shí)現(xiàn)方法,以javascript創(chuàng)建唯一實(shí)例的形式分析了javascript單例模式的簡單實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
下面小編就為大家?guī)硪黄狫avascript字符串拼接小技巧(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了swiper Scrollbar滾動(dòng)條組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09