欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 閉包詳解

 更新時間:2015年07月02日 12:09:23   投稿:hebedich  
閉包:是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式就是在一個函數(shù)內(nèi)部創(chuàng)建另外一個函數(shù)。在javascript中沒有塊級作用域,一般為了給某個函數(shù)申明一些只有該函數(shù)才能使用的局部變量時,我們就會用到閉包,我們來詳細(xì)探討下

看了一下網(wǎng)上閉包的概念及文章,對于這個問題,自己做一個梳理吧。

問:閉包是什么?
答:閉包是指在 JavaScript 中,內(nèi)部函數(shù)總是可以訪問其所在的外部函數(shù)中聲明的參數(shù)和變量,即使在其外部函數(shù)被返回(壽命終結(jié))了之后。

這個是我自身第一次碰到閉包的問題

<!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>

如果你以前沒這么用過的話,估計也會認(rèn)為單擊某個段落就會彈出這個段落相應(yīng)的編號0,1,2,3,4。但實際上是都是彈出5;

對于這個問題網(wǎng)上已經(jīng)有很多討論的博客了,他們給出了很多方法去實現(xiàn)彈出對應(yīng)的編號。

解決方法1:將變量i保存在對應(yīng)的段落的某個屬性上

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ù)中”;好吧,都和指針扯上關(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ù)同級的變量,那么該變量是常駐內(nèi)存的。訪問該變量實質(zhì)上是訪問的是變量的地址;

接著,又看了一篇關(guān)于“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ù)在搜索這兩個變量時,指揮搜索到其活動對象為止,因此永遠(yuǎn)不可能直接訪問外部函數(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)上找的,我也只是把自己理解的,看的過程總結(jié)一下吧。

相關(guān)文章

  • 關(guān)于include標(biāo)簽導(dǎo)致js路徑找不到的問題分析及解決

    關(guān)于include標(biāo)簽導(dǎo)致js路徑找不到的問題分析及解決

    本文為大家詳細(xì)介紹下關(guān)于使用jsp:include標(biāo)簽及<%@ include標(biāo)簽時要注意的事項以及實測發(fā)現(xiàn)問題并解決問題的全過程,感興趣的各位可以參考下哈,希望對大家有所幫助
    2013-07-07
  • 最新評論