淺析Javascript閉包的特性

Javascript閉包的定義非常晦澀——閉包,是指語法域位于某個特定的區域,具有持續參照(讀寫)位于該區域內自身范圍之外的執行域上的非持久型變量值能力的段落。這些外部執行域的非持久型變量神奇地保留它們在閉包最初定義(或創建)時的值(深連結)。
簡單來說,Javascript閉包就是在另一個作用域中保存了一份它從上一級函數或作用域取得的變量(鍵值對),而這些鍵值對是不會隨上一級函數的執行完成而銷毀。周愛民說得更清楚,閉包就是“屬性表”,閉包就是一個數據塊,閉包就是一個存放著“Name=Value”的對照表。就這么簡單。但是,必須強調,閉包是運行期概念,一個函數實例。
Javascript閉包的實現,通常是在函數內部再定義函數,讓該內部函數使用上一級函數的變量或全局變量。
ECMAScript認為使用全局變量是一個簡單的Javascript閉包實例。

1.  **var** sMessage = "Hello World";   
2.  **function** sayHelloWorld(){   
3.  alert(sMessage);   
4.  };   
5.  sayHelloWorld(); 

但它完成沒有體現Javascript閉包的特性……
現在比較讓人認同的Javascript閉包實現有如下三種

1.  **with**(obj){   
2.  //這里是對象閉包   
3.  }(**function**(){      
4.  //函數閉包   
5.  })()**try**{   
6.  //...   
7.  } **catch**(e) {   
8.  //catch閉包 但IE里不行   
9.  } 

附上我們常常遇到的問題:
要求:
讓這三個節點的Onclick事件都能正確的彈出相應的參數。

1.  <ul>
2. <li id="a1">aa</li>   
3.  <li id="a2">aa</li>   
4.  <li id="a3">aa</li>   
5.  </ul>   
6.  <script** type="text/javascript">   
7.  <ul>   
8.  <li id="a1">aa</li>  
9.  <li id="a2">aa</li>   
10. <li id="a3"*>aa</li>  
11.</ul>   
12. <script** type="text/javascript"**>**   
13. for(var i=1; i **< 4**; i++){   
14. var id = document.getElementById("a" + i);   
15. id.onclick = function(){   
16. alert(i);//現在都是返回4      
17. }   
18. }   
19. </script> 

解答:

  1. for(var i=1; i < 4; i++){
  2. var id = document.getElementById("a" + i);
  3. /*
  4. 這里生成了一個匿名函數并賦值給對象 id_i;
  5. */
  6. id.onclick = function(){
  7. /*
  8. 這個i來源于局部變量,無法以window.i或者obj.i的形式在后期引用,
  9. 只好以指針或者變量地址方式保存在這個匿名函數中,
  10. 這就是傳說的閉包,所以所有這個過程中生成的事件句柄都使用引用
  11. 的方式來持久這個變量,也就是這些匿名函數共用一個變量i;
  12. */
  13. alert(i);
  14. };
  15. };
    局部變全局
  16. for(var i=1; i < 4; i++){
  17. var id = document.getElementById("a" + i);
  18. id.i=i;//這個i有了根
  19. id.onclick=function(){
  20. alert(this.i)
  21. };
  22. };1.for(var i=1; i < 4; i++){
  23. var id = document.getElementById("a" + i);
  24. window[id.id]=i;//這個i有了根
  25. id.onclick=function(){
  26. alert(window[this.id]);
  27. };
  28. }
    產生一對一的更多Javascript閉包
  29. for(var i=1; i < 4; i++){
  30. var id = document.getElementById("a" + i);
  31. id.onclick = new function(){
  32. var i2=i;//這個i是閉包的閉包
  33. return function(){
  34. alert(i2);
  35. }
  36. };
  37. }
    javascript深入理解js閉包發布:dxy 字體:[增加 減小] 類型:轉載

閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高級應用都要依靠閉包實現。

一、變量的作用域

要理解閉包,首先必須理解Javascript特殊的變量作用域。

變量的作用域無非就是兩種:全局變量和局部變量。

Javascript語言的特殊之處,就在于函數內部可以直接讀取全局變量。

Js代碼

var n=999;

function f1(){
    alert(n);
  }

f1(); // 999

另一方面,在函數外部自然無法讀取函數內的局部變量。

Js代碼

function f1(){
    var n=999;
  }

alert(n); // error

這里有一個地方需要注意,函數內部聲明變量的時候,一定要使用var命令。如果不用的話,你實際上聲明了一個全局變量!

Js代碼

function f1(){
    n=999;
  }

f1();

alert(n); // 999


二、如何從外部讀取局部變量?

出于種種原因,我們有時候需要得到函數內的局部變量。但是,前面已經說過了,正常情況下,這是辦不到的,只有通過變通方法才能實現。

那就是在函數的內部,再定義一個函數。

Js代碼

function f1(){

n=999;

function f2(){
      alert(n); // 999
    }

}

在上面的代碼中,函數f2就被包括在函數f1內部,這時f1內部的所有局部變量,對f2都是可見的。但是反過來就不行,f2內部的局部變量,對f1 就是不可見的。這就是Javascript語言特有的“鏈式作用域”結構(chain scope),

子對象會一級一級地向上尋找所有父對象的變量。所以,父對象的所有變量,對子對象都是可見的,反之則不成立。

既然f2可以讀取f1中的局部變量,那么只要把f2作為返回值,我們不就可以在f1外部讀取它的內部變量了嗎!

Js代碼

function f1(){

n=999;

function f2(){
      alert(n);
    }

return f2;

}

var result=f1();

result(); // 999


三、閉包的概念

上一節代碼中的f2函數,就是閉包。

各種專業文獻上的“閉包”(closure)定義非常抽象,很難看懂。我的理解是,閉包就是能夠讀取其他函數內部變量的函數。

由于在Javascript語言中,只有函數內部的子函數才能讀取局部變量,因此可以把閉包簡單理解成“定義在一個函數內部的函數”。

所以,在本質上,閉包就是將函數內部和函數外部連接起來的一座橋梁。

--------------------------------------------------------------------------------------------------------b

四、閉包的用途

閉包可以用在許多地方。它的最大用處有兩個,一個是前面提到的可以讀取函數內部的變量,另一個就是讓這些變量的值始終保持在內存中。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高級應用都要依靠閉包實現。 一、變量...
    zock閱讀 1,084評論 2 6
  • 閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高級應用都要依靠閉包實現。 一、變量...
    zouCode閱讀 1,284評論 0 13
  • ● 閉包基礎 ● 閉包作用 ● 閉包經典例子 ● 閉包應用 ● 閉包缺點 ● 參考資料 1、閉包基礎 作用域和作...
    lzyuan閱讀 960評論 0 0
  • 閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高級應用都要依靠閉包實現。 下面就是...
    魯uin閱讀 307評論 0 2
  • 十八怪,原生態, 樹折樹倒由它擺。 身臥寧靜數星辰, 骨化沃土伴林海。 這也怪,那也怪, 少見自然就多怪。 一方水...
    珠江潮平閱讀 336評論 20 26