偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

淺談對JavaScript閉包的理解

開發(fā) 前端
事實上當(dāng)函數(shù)當(dāng)做值類型并到處傳遞時, 基本都會使用閉包,如定時器,跨窗口通信,事件監(jiān)聽,ajax等等 基本只要使用了回調(diào)函數(shù), 實際上就是在使用閉包。閉包是一把雙刃劍 是JavaScript比較難以理解和掌握的部分, 它十分強大,卻也有很大的缺陷,如何使用它完全取決于你自己。

[[171667]]

在談閉包之前,我們首先要了解幾個概念:

  • 什么是函數(shù)表達式? 與函數(shù)聲明有何不同?
  • JavaScript查找標(biāo)識符的機制
  • JavaScript的作用域是詞法作用域
  • JavaScript的垃圾回收機制

先來說說函數(shù)表達式

什么是函數(shù)表達式? 如果function是聲明中的***個詞,那么就是函數(shù)聲明,否則就是函數(shù)表達式。

舉個例子:

  1. var foo = function(){}; //匿名函數(shù)表達式 
  2.  
  3. function foo(){})() //函數(shù)表達式,因為function不是聲明中的***個詞,前面還有一個“(” 
  4.  
  5. function foo(){} //函數(shù)聲明  

函數(shù)表達式也分匿名函數(shù)表達式和具名函數(shù)表達式:

  1. var foo = function(){} //匿名函數(shù)表達式 
  2.  
  3. var foo = function bar(){} //具名函數(shù)表達式  

具名函數(shù)表達式要注意一點:上例中的bar標(biāo)識符 只在當(dāng)前的函數(shù)作用域中存在,在全局作用域中是不存在的。

函數(shù)聲明與函數(shù)表達式的重要區(qū)別有:

  • 函數(shù)聲明具有函數(shù)聲明提升,函數(shù)表達式不會被提升
  • 函數(shù)表達式可以在表達式后跟個括號來立即執(zhí)行,函數(shù)聲明不行
  1. function (){})() //匿名函數(shù)表達式,且立即執(zhí)行 

這種模式的函數(shù),通常稱為IIFE(Immediately Invoked Function Expresstion)代表立即執(zhí)行函數(shù)表達式。

關(guān)于函數(shù)、變量聲明的提升這里就不再多說了, 想了解的同學(xué)可以查閱一下相關(guān)資料

關(guān)于JavaScript執(zhí)行函數(shù)時查找標(biāo)識符的機制

不了解作用域鏈及變量對象的同學(xué)可以先查閱相關(guān)資料后再來看。

作用域鏈本質(zhì)上是一個由指向變量對象的指針列表,它只引用但不實際包含變量對象,變量,函數(shù)等等都存在各自作用域的變量對象中,通過訪問變量對象來訪問它們。

只有在函數(shù)調(diào)用的時候,才會創(chuàng)建執(zhí)行環(huán)境和作用域鏈,同時每個環(huán)境都只能逐級向上搜索作用域鏈,來查詢變量和函數(shù)名等標(biāo)識符。

JavaScript的作用域

JavaScript的作用域就是詞法作用域而不是動態(tài)作用域

詞法作用域最重要的特征是它的定義過程發(fā)生在代碼的書寫階段

動態(tài)作用域的作用域鏈?zhǔn)腔谡{(diào)用棧的 詞法作用域的作用域鏈?zhǔn)腔诖a中的作用域嵌套

  1. function foo(){ 
  2.     console.log(num) 
  3.     
  4. function bar(){ 
  5.     var num = 2; 
  6.     foo(); // 1 
  7.      
  8. var num = 1; 
  9. bar();      

bar函數(shù)執(zhí)行時,會執(zhí)行foo函數(shù),因為JavaScript是詞法作用域,所以函數(shù)執(zhí)行時,會沿著定義時的作用域鏈查找變量,而不是執(zhí)行時,foo函數(shù)定義在全局中,所以查找到了全局的num,輸出了1而不是2。

下面來說閉包

關(guān)于什么是閉包,其實有很多種說法,這取決于各自的理解,最主要的有兩種:

  • Nicolas C.Zakas:閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)
  • KYLE SIMPSON:當(dāng)函數(shù)可以記住并訪問所在的詞法作用域時,就產(chǎn)生了閉包,這個函數(shù)持有對該詞法作用域的引用,這個引用就叫做閉包

我個人更傾向于后者對于閉包的定義,即閉包是一個引用。下面來看一些代碼:

  1. function foo() { 
  2.     var a = 5; 
  3.     return function() { 
  4.     console.log(a); 
  5.     } 
  6.  } 
  7.  
  8. var bar = foo(); 
  9. bar();       // 5  

這段代碼里 foo執(zhí)行時會返回一個匿名函數(shù)表達式,這個函數(shù)能夠訪問foo()的作用域,并且引用能引用它,然后將這個匿名函數(shù)賦值給了變量bar,讓bar能引用這個匿名函數(shù)并且可以調(diào)用它。

這個例子,匿名函數(shù)在自己定義的詞法作用域以外的地方成功執(zhí)行。

這正是閉包強大的地方,比如通過閉包實現(xiàn)模塊模式: 

  1. function aModule() { 
  2.  
  3.     var sometext = "module"
  4.      
  5.     function doSomething() { 
  6.         console.log(sometext); 
  7.     } 
  8.      
  9.     return { 
  10.         doSomething: doSomething 
  11.         }; 
  12.  
  13. var obj = aModule(); 
  14. obj.doSomething()   //module  

我們通過調(diào)用aModule函數(shù)創(chuàng)建了一個模塊實例,函數(shù)返回的這個對象,實質(zhì)上可以看做是這個模塊的公告API,是不是有些像其它面向?qū)ο笳Z言中的class?

再來通過閉包實現(xiàn)一個單例模式: 

  1. var application = function() { 
  2.      
  3.     var components = []; 
  4.     /* 
  5.     一些初始化操作 
  6.     */ 
  7.     return {              //公共API 
  8.         getComponentCount: function() { 
  9.         return components.length; 
  10.         }, 
  11.         registerComponent: function(component) { 
  12.         components.push(component); 
  13.         } 
  14.     }; 
  15. }();  

這個例子通過IIFE創(chuàng)建了一個單例對象,函數(shù)里返回的對象字面量是這個單例模式的公共接口。

通過閉包實現(xiàn)模塊模式,可以做到很多強大的事情,模塊模式能成功實現(xiàn),最關(guān)鍵的是返回的API還能繼續(xù)引用定義時所在的作用域,從而進行一些操作,也就是說,作用域并沒有因為函數(shù)執(zhí)行后被銷毀,也就是沒有被內(nèi)存回收,之所以沒有被回收是因為閉包的存在和JavaScript的垃圾回收機制。

JavaScript的垃圾回收機制

JavaScript最常用的垃圾收集方式是標(biāo)記清除,垃圾收集器會給存儲在內(nèi)存中的所有變量都加上標(biāo)記,然后去除環(huán)境中的變量,以及被環(huán)境中的變量引用的變量的標(biāo)記,說明這些變量還有作用,暫時不能被刪除,然后在此之后被加上標(biāo)記的變量就是要刪除的變量了,等待垃圾收集器對他們完成清除工作。

對函數(shù)來說,函數(shù)執(zhí)行完畢后,會自動釋放掉里面的變量,可是如果函數(shù)內(nèi)部存在閉包,它們就不會被刪除,因為這個函數(shù)還在被內(nèi)部的函數(shù)所引用,所以他不會被加上標(biāo)記,不會被清除,而是會一直存在內(nèi)存中得不到釋放!除非使用閉包的那個內(nèi)部函數(shù)被銷毀,外部函數(shù)才能得到釋放

所以,雖然閉包強大,但是我們不能濫用它,且在沒有必要的情況下盡量不要創(chuàng)建閉包,不然將會有大量的變量對象得不到釋放,過度占用內(nèi)存。

關(guān)于循環(huán)和閉包

當(dāng)循環(huán)和閉包結(jié)合在一起時,經(jīng)常會產(chǎn)生讓初學(xué)者覺得匪夷所思的問題。來看一段Nicolas C.Zakas 在《JavaScript高級程序設(shè)計》中的代碼: 

  1. function createFunction() { 
  2.     var result = []; 
  3.     for (var i = 0; i < 10; i++) { 
  4.         result[i] = function() { 
  5.             return i; 
  6.         }; 
  7.     } 
  8.     return result; 
  9.  

這個函數(shù)執(zhí)行后,會創(chuàng)建一個由十個函數(shù)組成的數(shù)組,并且產(chǎn)生十個互不相干的函數(shù)作用域,表面上看調(diào)用第幾個函數(shù)就會輸出幾,但是結(jié)果并不是這樣 

  1. var result = createFunction(); 
  2. result[0]();  // 10 
  3. result[9]();  // 10  

產(chǎn)生這種奇怪的現(xiàn)象的原因就是之前說的,createFunction的變量對象因為閉包的存在沒有被釋放,注意閉包保存的是整個變量對象,而不是只保存只被引用的變量,在createFunction執(zhí)行后,創(chuàng)建了十個函數(shù),同時變量 i 沒有被釋放,依然保存在內(nèi)存中,所以此時它的值保留為停止循環(huán)后的10。

當(dāng)我們在外部調(diào)用函數(shù)時,函數(shù)沿著它的作用域鏈開始搜索所需要的變量,前面說過,JavaScript的作用域鏈?zhǔn)腔诙x時的作用域嵌套,所以當(dāng)我們調(diào)用某個函數(shù)比如 result[0] 它就會首先在自己的作用域里通過RSH搜索 i ,顯然 i 不存在這個作用域中,于是它又沿著作用域鏈向上一級作用域中搜索 i ,然后找到了 i ,但是此時createFunction函數(shù)已經(jīng)執(zhí)行,循環(huán)也已經(jīng)執(zhí)行完畢了, i 的值為10,所以獲取到的i,值就為10,同理,其他的函數(shù)執(zhí)行時,查找的i 也會是10, 所以每個函數(shù)執(zhí)行結(jié)果都是輸出10。

關(guān)鍵所在就是盡管循環(huán)中的十個函數(shù)是在各自的迭代中分別定義的,但是它們都處于一個共享的上一級作用域中,所以它們獲取到的都是一個 i

所以解決此類問題的關(guān)鍵就是讓函數(shù)查找i時,不找到createFunction的變量對象那一級 ,因為一旦向上搜索到createFunction那里,得到的就是10。所以我們可以通過一些方法在中間來截斷本該搜索到createFunction變量對象的一次查找。

首先我們可以這樣: 

  1. function createFunction() { 
  2.     var result = []; 
  3.     for (var i = 0; i < 10; i++) { 
  4.     (function (){ 
  5.         result[i] = function() { 
  6.             return i; 
  7.         };})(); 
  8.     } 
  9.     return result; 
  10.  

我們通過定義一個立即執(zhí)行函數(shù)表達式,在result[i]函數(shù)上一級創(chuàng)建了一個塊級作用域,如果我們把這個塊級作用域叫做a,那么它查找i時是這樣一條鏈 result[i]->a->createFunction,之所以還會查找到createFunction中,是因為a中沒有i這個變量,所以我們需要做些什么,讓它搜索到a時就停下 

  1. function createFunctions() { 
  2.     var result = new Array(); 
  3.     for (var i = 0; i < 10; i++) { 
  4.         (function(i){ 
  5.         result[i] = function() { 
  6.             return i; 
  7.         };})(i); 
  8.         } 
  9.      
  10.     return result; 
  11.  

現(xiàn)在a這個塊級作用域里定義了一個變量 i ,這個 i 與上級的 i 不會互相影響,因為它們存在各自的作用域里, 同時我們將該次迭代時的 i 值賦給了 a這個塊級作用域里的 i ,即a中的 i 保存了當(dāng)次迭代的 i ,result[i]在外部執(zhí)行時,是這樣的調(diào)用鏈result i -> a在a中就能找到需要的變量,不需要再向上搜索,也不會查找到值為10的 i ,所以調(diào)用哪個result[i]函數(shù),就會輸出哪個 i 。

在 ES6 中我們還可以使用 let 來解決此類問題 

  1. function createFunction() { 
  2.     var result = []; 
  3.     for (var i = 0; i < 10; i++) { 
  4.         let j = i; 
  5.         result[i] = function() { 
  6.             return j; 
  7.         }; 
  8.     } 
  9.     return result; 
  10. //輸出一下 
  11. console.log(createFunction()[2]());  //2  

let會創(chuàng)建一個塊級作用域,并在這個作用域中聲明一個變量。所以我們相當(dāng)于在result[i]上套了一層塊級作用域 

  1. function createFunction() { 
  2.     var result = []; 
  3.     for (var i = 0; i < 10; i++) { 
  4.         //塊的開始 
  5.         let j = i; 
  6.         result[i] = function() { 
  7.             return j; 
  8.         }; 
  9.         //塊的結(jié)束 
  10.     } 
  11.     return result; 
  12.  

這種方式解決此類問題,與前面沒有多大分別,總之就是為了不讓函數(shù)調(diào)用時去查找到最上級的那個 i 。

其實,如果在for循環(huán)頭部來進行l(wèi)et聲明還會有一個有趣的行為: 

  1. function createFunction() { 
  2.     var result = []; 
  3.     for (let i = 0; i < 10; i++) {    //每次迭代,都會聲明一次i,總共聲明10次 
  4.         result[i] = function() { 
  5.             return i; 
  6.         }; 
  7.     } 
  8.     return result; 
  9. console.log(createFunction()[2]());  //2  

這樣在for頭部使用let聲明, 每次迭代都會進行聲明,隨后每次迭代都會使用上一個迭代結(jié)束時的值來初始化這個變量。

事實上當(dāng)函數(shù)當(dāng)做值類型并到處傳遞時, 基本都會使用閉包,如定時器,跨窗口通信,事件監(jiān)聽,ajax等等 基本只要使用了回調(diào)函數(shù), 實際上就是在使用閉包。

閉包是一把雙刃劍 是JavaScript比較難以理解和掌握的部分, 它十分強大,卻也有很大的缺陷,如何使用它完全取決于你自己。

以上皆為個人觀點 如若有誤 還望指正。

責(zé)任編輯:龐桂玉 來源: segmentfault
相關(guān)推薦

2011-03-02 12:33:00

JavaScript

2017-05-22 16:08:30

前端開發(fā)javascript閉包

2021-02-21 16:21:19

JavaScript閉包前端

2016-10-27 19:26:47

Javascript閉包

2011-08-05 09:33:30

Func局部變量作用域

2016-09-14 09:20:05

JavaScript閉包Web

2009-07-24 17:30:37

Javascript閉

2020-10-14 15:15:28

JavaScript(

2011-05-25 14:48:33

Javascript閉包

2011-03-22 10:16:48

程序員

2009-04-24 09:43:09

.NETASP.NET框架

2022-10-24 08:08:27

閉包編譯器

2012-11-29 10:09:23

Javascript閉包

2010-06-23 10:24:42

Javascript閉

2017-09-14 13:55:57

JavaScript

2011-05-12 18:26:08

Javascript作用域

2017-07-14 10:55:05

2009-06-04 09:41:50

struts2上傳文件

2022-05-06 16:18:00

Block和 C++OC 類lambda

2010-07-26 11:27:58

Perl閉包
點贊
收藏

51CTO技術(shù)棧公眾號