javascript 閉包詳解_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript 閉包詳解_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

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”

登入後複製

不同之處在於把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

登入後複製

只要其他作用域能取到子作用域的存取接口，那麼其他作用域就有方法存取該子作用域父級作用域的變數了。這樣的話，如果以後需要訪問某個函數裡面的值得時候，就大大的有用咯。

這些上面的很多程式碼其實也都是在網路上找的，我也只是把自己理解的，看的過程總結一下吧。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1421

Laravel 教程

1315

PHP教程

1266

C# 教程

1239

Related knowledge

C++ lambda 表達式中閉包的意思是什麼？ Apr 17, 2024 pm 06:15 PM

在C++中，閉包是能夠存取外部變數的lambda表達式。若要建立閉包，請擷取lambda表達式中的外部變數。閉包提供可重複使用性、資訊隱藏和延遲求值等優點。它們在事件處理程序等實際情況中很有用，其中即使外部變數被銷毀，閉包仍然可以存取它們。

C++ 函式中閉包的優點和缺點是什麼？ Apr 25, 2024 pm 01:33 PM

閉包是一種巢狀函數，它能存取外層函數作用域的變量，優點包括資料封裝、狀態保持和靈活性。缺點包括記憶體消耗、效能影響和調試複雜性。此外，閉包還可以建立匿名函數，並將其作為回調或參數傳遞給其他函數。

C++ Lambda 表達式如何實作閉包？ Jun 01, 2024 pm 05:50 PM

C++Lambda表達式支援閉包，即保存函數作用域變數並供函數存取。語法為[capture-list](parameters)->return-type{function-body}。 capture-list定義要捕獲的變量，可以使用[=]按值捕獲所有局部變量，[&]按引用捕獲所有局部變量，或[variable1,variable2,...]捕獲特定變量。 Lambda表達式只能存取捕獲的變量，但無法修改原始值。

解決閉包導致的記憶體洩漏問題 Feb 18, 2024 pm 03:20 PM

標題：閉包造成的記憶體洩漏及解決方法引言：閉包是JavaScript中一個非常常見的概念，它可以讓內部函數存取外部函數的變數。然而，閉包在使用不當的情況下可能導致記憶體洩漏。本文將探討閉包所造成的記憶體洩漏問題，並提供解決方法及具體程式碼範例。一、閉包引起的記憶體洩漏問題閉包的特性是內部函數可以存取外部函數的變量，這意味著在閉包中引用的變數不會被垃圾回收。如果使用不當，