看了一下網上閉包的概念及文章,對於這個問題,自己做一個梳理吧。
問:閉包是什麼?
答:閉包是指在 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
只要其他作用域能取到子作用域的訪問接口,那麼其他作用域就有方法訪問該子作用域父級作用域的變量了。這樣的話,如果以後需要訪問某個函數裡面的值得時候,就大大的有用咯。
這些上面的很多代碼其實也都是網上找的,我也只是把自己理解的,看的過程總結一下吧。