javascript 閉包詳解
看了一下網(wǎng)上閉包的概念及文章，對于這個問題，自己做一個梳理吧。
問：閉包是什么？
答：閉包是指在 JavaScript 中，內(nèi)部函數(shù)總是可以訪問其所在的外部函數(shù)中聲明的參數(shù)和變量，即使在其外部函數(shù)被返回（壽命終結）了之后。
這個是我自身第一次碰到閉包的問題
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>閉包循環(huán)問題</title>
<style type="text/css">
p {background:#ccc; width: 300px; height: 100px;}
</style>
</head>
<body>
<p id="p0">段落0</p>
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
<p id="p4">段落4</p>
<script type="text/javascript">
for( var i=0; i<5; i++ ) {
document.getElementById("p"+i).onclick=function() {
alert(i); //訪問了父函數(shù)的變量i, 閉包
};
};
</script>
</body>
</html>
如果你以前沒這么用過的話，估計也會認為單擊某個段落就會彈出這個段落相應的編號0，1，2，3，4。但實際上是都是彈出5；
對于這個問題網(wǎng)上已經(jīng)有很多討論的博客了，他們給出了很多方法去實現(xiàn)彈出對應的編號。
解決方法1：將變量i保存在對應的段落的某個屬性上
var pAry = document.getElementsByTagName("p");
for( var i=0; i< 5; i++ ) {
pAry[i].no = i;
pAry[i].onclick = function() {
alert(this.no);
}
};
解決方法2：加一層閉包，i 以函數(shù)參數(shù)形式傳遞給內(nèi)層函數(shù)
var pAry = document.getElementsByTagName("p");
for( var i=0; i< 5; i++ ) {
pAry[i].no = i;
pAry[i].onclick = function() {
alert(this.no);
}
};
對于這個產(chǎn)生的閉包問題，網(wǎng)上的說法是“變量i是以指針或者變量地址方式保存在函數(shù)中”；好吧，都和指針扯上關系了。。。。那就再探索一下吧。
探索1，返回的都是10而不是而是
(function test() {
var temp =10;
for(var i=0; i< 5; i++ ){
document.getElementById("p"+i).onclick=function() {
alert(temp); //訪問了父函數(shù)的變量temp, 閉包
}
};
temp=20;
})();
探索2，返回一次10，接下去返回的都是20
(function test() {
var temp =10;
for( var i=0; i< 5; i++ ) {
document.getElementById("p"+i).onclick=function() {
alert(temp); //訪問了父函數(shù)的變量i, 閉包
}
if(i===1){
alert(temp);
}
};
temp=20;
})();
由探索的1、2，可以得出結論：函數(shù)內(nèi)部訪問了與函數(shù)同級的變量，那么該變量是常駐內(nèi)存的。訪問該變量實質(zhì)上是訪問的是變量的地址；
接著，又看了一篇關于“JS閉包中的this對象”的文章，繼續(xù)來討論一下，this這個問題吧。
// js閉包this對象1
var name = 'The Window';
var object = {
name : 'My Object',
getNameFunc1 : function(){
// return this.name;
console.log(this);//object
return function(){//閉包，訪問的便是全局變量的了，this指windows
console.log(this);//windows
return this.name; //The Window
}
},
getNameFunc2 : function(){
return this.name;//訪問的是object
},
aa:function(){
alert(22);
}
};
alert(object.getNameFunc1()());//彈出“The Window”
問： 那么為什么匿名函數(shù)沒有取得其包含作用域的this對象呢？
答：每個函數(shù)在被調(diào)用時都會自動獲取兩個特殊變量：this 和 arguments。 內(nèi)部函數(shù)在搜索這兩個變量時，指揮搜索到其活動對象為止，因此永遠不可能直接訪問外部函數(shù)中的這兩個變量。
不過通過下面的代碼可以做到這一點（直接訪問外部函數(shù)中的變量）：
// js閉包this對象2
var name = 'The Window';
var object = {
name : 'My Object',
getNameFunc : function(){
var that = this;
console.log(this);//輸出的是object
return function(){
console.log(this);//輸出的仍然是Windows
return that.name;
};
}
};
alert(object.getNameFunc()());//彈出“My Object”
不同之處在于把this對象賦給了一個that變量，即使在函數(shù)返回之后，that也仍然引用這object，所以會返回object。
寫了那么多閉包的東西，那也順便再說一下閉包有神馬用處吧；不然，一直搗亂那閉包可真是一個不好的家伙呢。
看這樣一典型的閉包的例子：
function A(){
var a=1;
function B(){
return a;
};
return B;
};
var C=A();//C取得A的子作用域B的訪問接口
console.log(C());//1 C能訪問到B的父級作用域中的變量a
只要其他作用域能取到子作用域的訪問接口，那么其他作用域就有方法訪問該子作用域父級作用域的變量了。這樣的話，如果以后需要訪問某個函數(shù)里面的值得時候，就大大的有用咯。
這些上面的很多代碼其實也都是網(wǎng)上找的，我也只是把自己理解的，看的過程總結一下吧。
相關文章
本文僅僅起到一個拋磚引玉的作用，讓大家了解到事件代理的原理而已，jquery中的live和delegate實現(xiàn)要復雜的多2014-03-03
這個函數(shù)來自Rico，Longbill及Dnew.cn修改。 說明: 傳入?yún)?shù)一個，為元素的id值或元素本身，返回為元素的真實背景色值（字符串）。背景值均為16進制的值（原代碼是是IE里面返回的是16進制的值，而Mozilla則是rgb值，Dnew.cn將其修改為均返回16進制的值）。2007-12-12
用JavaScript實現(xiàn)UrlEncode和UrlDecode的腳本代碼
用js自定義函數(shù)寫的實現(xiàn)url加密解密的實現(xiàn)代碼，需要的朋友可以參考下2008-07-07
這篇文章介紹了GUID的幾種生成算法，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了js?字符串反轉(倒序)的幾種方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
微信小程序中的畫布是非常重要的展示控件,其相當于HTML中的canvas控件,下面這篇文章主要給大家介紹了關于微信小程序實現(xiàn)Canvas畫板的相關資料,需要的朋友可以參考下2024-08-08
這篇文章主要給大家介紹了關于微信小程序下拉刷新PullDownRefresh的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
下面小編就為大家?guī)硪黄狫S實用的帶停頓的逐行文本循環(huán)滾動效果實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
Async / Await是人們期待已久的JavaScript功能，它使使用異步功能更加有趣和易于理解。這篇文章主要給大家介紹了關于Javascript中異步等待的相關資料,需要的朋友可以參考下2021-05-05
微信小程序拍賣商品詳情頁設計與交互實現(xiàn)代碼(含倒計時、實時更新出價)
這篇文章主要介紹了微信小程序拍賣商品詳情頁設計與交互實現(xiàn)代碼(含倒計時、實時更新出價),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08