【原】理解javascript中的閉包


閉包在javascript來說是比較重要的概念,平時工作中也是用的比較多的一項技術。下來對其進行一個小小的總結

 

什么是閉包?

 

官方說法:

  閉包是指有權訪問另一個函數作用域中的變量的函數。創建閉包的常見方式,就是在一個函數內部創建另一個函數,通過另一個函數訪問這個函數的局部變量------《javascript高級程序設計第三版》

 

下面就是一個簡單的閉包:

function A(){
	var text="hello world";
	function B(){
	   console.log(text);
	}
	return B;
}
var c=A();
c(); // hello world 

按照字面量的意思是:函數B有權訪問函數A作用域中的變量(text),通過另一個函數C來訪問這個函數的局部變量text。因此函數B形成了一個閉包。也可以說C是一個閉包,因為C執行的實際是函數B。

這個需要注意的是,直接執行A();是沒有任何反應的。因為return B沒有執行,除非是return B();

閉包的特性

 

 閉包有三個特性:

 1.函數嵌套函數
2.函數內部可以引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收

解釋一下第3點,為什么閉包的參數和變量不會被垃圾回收機制回收呢?

首先我們先了解一下javascript的垃圾回收原理:

(1)、在javascript中,如果一個對象不再被引用,那么這個對象就會被GC(garbage collection)回收; 

(2)、如果兩個對象互相引用,而不再被第3者所引用,那么這兩個互相引用的對象也會被回收。

  上面的示例代碼中A是B的父函數,而B被賦給了一個全局變量C(全局變量的生命周期直至瀏覽器卸載頁面才會結束),這導致B始終在內存中,而B的存在依賴於A,因此A也始終在內存中,不會在調用結束后,被垃圾回收機制(garbage collection)回收。

閉包的作用:

 

  其實閉包的作用也是有閉包的特性決定的,根據上面的閉包特性,閉包的作用如下:

  1、可以讀取函數內部的變量,而不是定義一起全局變量,避免污染環境

  2、讓這些變量的值始終保持在內存中。

閉包的代碼示例

 

下面主要介紹幾種常見的閉包,並進行解析:

 

demo1 局部變量的累加。

function countFn(){
    var count=1;
    return function(){             //函數嵌套函數
        count++;
        console.log(count);
    }
}
var y = countFn();    //外部函數賦給變量y;
y();   //2      //y函數調用一次,結果為2,相當於countFn()()
y();   //3     //y函數調用第二次,結果為3,因為上一次調用的count還保存在內存中,沒有被銷毀,所以實現了累加
y=null;  //垃圾回收,釋放內存
y();  // y is not a function

由於第一次執行完,變量count還保存在內存中,所以不會被回收,以致於第二次執行的時候可以對上次的值就行累加。當引入y=null時,銷毀引用,釋放內存

 

demo2 循環中使用閉包


代碼如下(下面的三個代碼示例):我們的目的是想在每次循環中調用循環序號:

 

demo2-1

for (var i = 0; i < 10; i++) { var a = function(){ console.log(i) } a() //依次為0--9 }

這個例子的結果是沒有題的,我們依次打印出了0-9

每一層匿名函數和變量i都組成了一個閉包,但是這樣在循環中並沒有問題,因為函數在循環體中立即被執行了

 

demo2-2

但是在setTimeout中就不一樣了

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  //10次10 
    }, 1000);
}

我們期望的依次是打印出0--10,實際情況是打印出 10次10。即使吧setTimeout的時間改為0,也是打印出10個10。這是為什么呢?

    這是因為setTimeout的一種機制,setTimeout是從任務隊列結束的時候開始計時的,如果前面有進程沒有結束,那么它就等到它結束再開始計時。在這里,任務隊列就是它自己所在的循環。

循環結束setTimeout才開始計時,所以無論如何,setTimeout里面的i都是最后一次循環的 i。該代碼中,最后的 i 為10,所以打印出了10個10.

    這也就是為什么setTimeout的回調不是每次取循環時的值,而取最后一次的值

 

demo2-3

解決上面的setTimeout不能依次打印出循環的問題

for(var i=0;i<10;i++){ var a=function(e){ return function(){ console.log(e); //依次輸入0--9
 } } setTimeout(a(i),0); }

因為setTimeout第一個參數需要一個函數,所以返回一個函數給它,返回的同時把 i 作為參數傳進去,通過形參 e 緩存了i,也就是說e變量相當於是 i 的一個拷貝 ,並帶進返回的函數里面。

 setTimeout 的執行時,它就擁有了對 e 的引用,而這個值是不會被循環改變的。

 

也可以用下面的寫法,和上面類似:

for(var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); //依次打印出0-9
        }, 0); })(i); }

 

 demo3 循環中添加事件

 看下面的一個典型的demo.

我們希望每次點擊li的時候,alert出li的索引值,所以用下面的代碼:

 <ul id="test">
    <li>第一個</li>
    <li>第二個</li>
    <li>第三個</li>
    <li>第四個</li>
</ul>

var nodes = document.getElementsByTagName("li"); for(i = 0,len=nodes.length;i<len;i++){ nodes[i].onclick = function(){ alert(i); //值全是4
 }; }

事與願違,無論點擊哪一個li,都是alert(4),也就是都是alert循環結束之后的索引值。這是為什么呢?

    這是因為循環中為不同的元素綁定事件,事件回調函數里如果調用了跟循環相關的變量,則這個變量取循環的最后一個值。

    由於綁定的回調函數是一個匿名函數,所以上面的代碼中, 這個匿名函數是一個閉包,攜帶的作用域為外層作用域(也就是for里面的作用域),當事件觸發的時候,作用域中的變量已經隨着循環走到最后了。

    還有一點就是,事件是需要觸發的,而絕大多數情況下,觸發的時候循環已經結束了,所以循環相關的變量就是最后一次的取值。

 

要實現點擊li,alert出li的索引值,需要將上面的代碼進行以下的修改:

<ul id="test">
    <li>第一個</li>
    <li>第二個</li>
    <li>第三個</li>
    <li>第四個</li>
</ul>
var nodes=document.getElementsByTagName("li"); for(var i=0;i<nodes.length;i++){ (function(e){ nodes[i].onclick=function(){ alert(e); }; })(i) }

   解決思路: 增加若干個對應的閉包域空間(這里采用的是匿名函數),專門用來存儲原先需要引用的內容(下標)。

   當立即執行函數執行的時候,e 值不會被銷毀,因為它的里面有個匿名函數(也可以說是因為閉包的存在,所以變量不會被銷毀)。執行后,e 值 與全局變量 i 的聯系就切斷了,

也就是說,執行的時候,傳進的 i 是多少,立即執行函數的 e 就是多少,但是 e 值不會消失,因為匿名函數的存在。 

 

也可以用下面的解法,原理是一樣的:

<ul id="test">
    <li>第一個</li>
    <li>第二個</li>
    <li>第三個</li>
    <li>第四個</li>
</ul>

var nodes=document.getElementsByTagName('li'); for(var i = 0; i<nodes.length;i++){ (function(){ var temp = i; nodes[i].onclick = function () { alert(temp); } })(); }

 

 

注意事項

 

  1、造成內存泄露

    由於閉包會攜帶包含它的函數的作用域,因此會比其他函數占用更多的內存。過度使用閉包可能會導致內存占用過多,所以只有在絕對必要時再考慮使用閉包。

  2、在閉包中使用this也可能會導致一些問題。

       代碼示例:來源於《js高級程序設計3》;

其實我們的目的是想alert出object里面的name

 var name="The Window"; var object={ name:"My Object", getNameFunc:function(){ return function(){ return this.name; } } } alert(object.getNameFunc()()); // The Window

 因為在全局函數中,this等於window,而當函數被作為某個對象的方法調用時,this等於那個對象。不過,匿名函數的執行環境具有全局性,因此其this對象通常指向window。

每個函數在被調用時,都會自動取的兩個特殊變量:this和 arguments。內部函數在搜索這兩個變量時,只會搜索到其活動對象為止。也就是說,里面的return function只會搜索

到全局的this就停止繼續搜索了。因為它永遠不可能直接訪問外部函數中的這兩個變量。

 

稍作修改,把外部作用域中的this對象保存在一個閉包能夠訪問的變量里。這樣就可以讓閉包訪問該對象了。

 var name="The Window"; var object={ name:"My Object", getNameFunc:function(){ var that=this; return function(){ return that.name; } } } alert(object.getNameFunc()()); // My Object

我們把this對象賦值給了that變量。定義了閉包之后閉包也可以訪問這個變量。因此,即使在函數返回之后,that也仍引用這object,所以調用object.getNameFunc()()就返回 “My Object”了。

  

總結

 

當在函數內部定義了其他函數,就創建了閉包。閉包有權訪問包含函數內部的所有變量。

  閉包的作用域包含着它自己的作用域、包含函數的作用域和全局作用域。

  當函數返回一個閉包時,這個函數的作用域會一直在內存中保存到閉包不存在為止。

  使用閉包必須維護額外的作用域,所有過度使用它們可能會占用大量的內存

 

有誤之處,歡迎指出


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM