javascript 閉包詳解

2024-05-06 16:22:41

字體：大中小

來源：轉載

供稿：網友

閉包：是指有權訪問另外一個函數作用域中的變量的函數。創建閉包的常見方式就是在一個函數內部創建另外一個函數。在javascript中沒有塊級作用域，一般為了給某個函數申明一些只有該函數才能使用的局部變量時，我們就會用到閉包，我們來詳細探討下

看了一下網上閉包的概念及文章，對于這個問題，自己做一個梳理吧。

問：閉包是什么?

答：閉包是指在 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”