javascript 閉包詳解_javascript技巧
- WBOY原創
- 2016-05-16 15:51:541241瀏覽
看了一下網路上閉包的概念及文章，對於這個問題，自己做一個梳理吧。
問：閉包是什麼？
答：閉包是指在 JavaScript 中，內部函數總是可以存取其所在的外部函數中聲明的參數和變量，即使在其外部函數被返回（壽命終結）了之後。
這是我自己第一次碰到閉包的問題
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>闭包循环问题</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); //访问了父函数的变量i, 闭包
};
};
</script>
</body>
</html>
如果你以前沒這麼用過的話，估計也會認為點擊某個段落就會彈出這個段落對應的編號0，1，2，3，4。但其實都是彈出5;
對於這個問題網上已經有很多討論的博客了，他們給出了很多方法去實現彈出對應的編號。
解決方法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 以函數參數形式傳遞給內層函數
var pAry = document.getElementsByTagName("p");
for( var i=0; i< 5; i++ ) {
pAry[i].no = i;
pAry[i].onclick = function() {
alert(this.no);
}
};
對於這個產生的閉包問題，網路上的說法是「變數i是以指標或變數位址方式保存在函數中」；好吧，都跟指標扯上關係了。 。 。 。那就再探索一下吧。
探索1，回傳的都是10而不是而是
(function test() {
var temp =10;
for(var i=0; i< 5; i++ ){
document.getElementById("p"+i).onclick=function() {
alert(temp); //访问了父函数的变量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); //访问了父函数的变量i, 闭包
}
if(i===1){
alert(temp);
}
};
temp=20;
})();
由探索的1、2，可以得出結論：函數內部存取了與函數同級的變量，那麼該變數是常駐記憶體的。存取該變數實質上是訪問的是變數的位址；
接著，又看了一篇關於「JS閉包中的this物件」的文章，繼續來討論一下，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”
問： 那為什麼匿名函數沒有取得其包含作用域的this物件呢？
答：每個函數在被呼叫時都會自動取得兩個特殊變數：this 和 arguments。 內部函數在搜尋這兩個變數時，指揮會搜尋其活動物件為止，因此永遠不可能直接存取外部函數中的這兩個變數。
不過透過下面的程式碼可以做到這一點（直接存取外部函數中的變數）：
// 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變量，即使在函數回傳之後，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
只要其他作用域能取到子作用域的存取接口，那麼其他作用域就有方法存取該子作用域父級作用域的變數了。這樣的話，如果以後需要訪問某個函數裡面的值得時候，就大大的有用咯。
這些上面的很多程式碼其實也都是在網路上找的，我也只是把自己理解的，看的過程總結一下吧。