javascript 閉包詳解
看了一下網(wǎng)上閉包的概念及文章，對于這個(gè)問題，自己做一個(gè)梳理吧。
問：閉包是什么？
答：閉包是指在 JavaScript 中，內(nèi)部函數(shù)總是可以訪問其所在的外部函數(shù)中聲明的參數(shù)和變量，即使在其外部函數(shù)被返回（壽命終結(jié)）了之后。
這個(gè)是我自身第一次碰到閉包的問題
<!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>
如果你以前沒這么用過的話，估計(jì)也會(huì)認(rèn)為單擊某個(gè)段落就會(huì)彈出這個(gè)段落相應(yīng)的編號(hào)0，1，2，3，4。但實(shí)際上是都是彈出5；
對于這個(gè)問題網(wǎng)上已經(jīng)有很多討論的博客了，他們給出了很多方法去實(shí)現(xiàn)彈出對應(yīng)的編號(hào)。
解決方法1：將變量i保存在對應(yīng)的段落的某個(gè)屬性上
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);
}
};
對于這個(gè)產(chǎn)生的閉包問題，網(wǎng)上的說法是“變量i是以指針或者變量地址方式保存在函數(shù)中”；好吧，都和指針扯上關(guān)系了。。。。那就再探索一下吧。
探索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，可以得出結(jié)論：函數(shù)內(nèi)部訪問了與函數(shù)同級(jí)的變量，那么該變量是常駐內(nèi)存的。訪問該變量實(shí)質(zhì)上是訪問的是變量的地址；
接著，又看了一篇關(guān)于“JS閉包中的this對象”的文章，繼續(xù)來討論一下，this這個(gè)問題吧。
// 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對象呢？
答：每個(gè)函數(shù)在被調(diào)用時(shí)都會(huì)自動(dòng)獲取兩個(gè)特殊變量：this 和 arguments。 內(nèi)部函數(shù)在搜索這兩個(gè)變量時(shí)，指揮搜索到其活動(dòng)對象為止，因此永遠(yuǎn)不可能直接訪問外部函數(shù)中的這兩個(gè)變量。
不過通過下面的代碼可以做到這一點(diǎn)（直接訪問外部函數(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對象賦給了一個(gè)that變量，即使在函數(shù)返回之后，that也仍然引用這object，所以會(huì)返回object。
寫了那么多閉包的東西，那也順便再說一下閉包有神馬用處吧；不然，一直搗亂那閉包可真是一個(gè)不好的家伙呢。
看這樣一典型的閉包的例子：
function A(){
var a=1;
function B(){
return a;
};
return B;
};
var C=A();//C取得A的子作用域B的訪問接口
console.log(C());//1 C能訪問到B的父級(jí)作用域中的變量a
只要其他作用域能取到子作用域的訪問接口，那么其他作用域就有方法訪問該子作用域父級(jí)作用域的變量了。這樣的話，如果以后需要訪問某個(gè)函數(shù)里面的值得時(shí)候，就大大的有用咯。
這些上面的很多代碼其實(shí)也都是網(wǎng)上找的，我也只是把自己理解的，看的過程總結(jié)一下吧。
相關(guān)文章
js使用cookie實(shí)現(xiàn)記住用戶名功能示例
這篇文章主要介紹了js使用cookie實(shí)現(xiàn)記住用戶名功能,涉及javascript操作cookie讀寫及刪除實(shí)現(xiàn)用戶名的保存功能,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了小程序中手機(jī)號(hào)識(shí)別的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
純javascript實(shí)現(xiàn)圖片延時(shí)加載方法
看到一篇博客說土豆網(wǎng)的圖片是延遲加載的。原理是這樣：頁面可見區(qū)域以下的圖片先不加載，等到用戶向下滾動(dòng)到圖片位置時(shí)，再進(jìn)行加載。這樣做的好處是當(dāng)頁面有好幾屏內(nèi)容時(shí)，這樣我們就可以只加載用戶需要看的圖片，減少服務(wù)器向用戶瀏覽器發(fā)送圖片文件所產(chǎn)生的負(fù)荷。2015-08-08
這篇文章主要介紹了Javascript字符串常用方法詳解的相關(guān)資料,在平時(shí)工作中經(jīng)常會(huì)用到的，非常不錯(cuò)，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了深入理解Javascript中this的作用域,本文用大量例子來深入探討this的作用域,需要的朋友可以參考下2014-08-08
基于JS實(shí)現(xiàn)9種不同的面包屑和分布式多步驟導(dǎo)航效果
本文是小編給大家分享的基于js實(shí)現(xiàn)的9種不同風(fēng)格的面包屑和分布式多步驟導(dǎo)航效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02
js實(shí)現(xiàn)對ajax請求面向?qū)ο蟮姆庋b
這篇文章主要介紹了js實(shí)現(xiàn)對ajax請求面向?qū)ο蟮姆庋b的相關(guān)資料,需要的朋友可以參考下2016-01-01
js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)
下面小編就為大家分享一篇js的函數(shù)的按值傳遞參數(shù)的實(shí)例，具有很好的參考價(jià)值，一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
關(guān)于include標(biāo)簽導(dǎo)致js路徑找不到的問題分析及解決