天天看點

Dreamwear如何建立javascript_JavaScript閉包到底有什麼特别之處?使用閉包的好處再舉另一個例子總結

Dreamwear如何建立javascript_JavaScript閉包到底有什麼特别之處?使用閉包的好處再舉另一個例子總結

英文 | https://levelup.gitconnected.com/what-is-really-so-special-about-javascript-closures-5701f8e4229f 翻譯 | web前端開發(ID:web_qdkf) “你能告訴我什麼是閉包嗎?” 如果你是全棧,前端,後端或使用JavaScript進行任何操作,則可能聽說過術語“閉包”。如果要面試軟體工程師職位,則可能會遇到一個問題,要求你解釋什麼是閉包。 上面提到的問題很容易回答,你僅記住閉包的定義就可以舉幾個例子。 該術語的問題不在于了解閉包的定義,而是在于了解為什麼要在項目中使用它。 在深入探讨JavaScript閉包之前,讓我們一起來了解一下什麼是閉包。 閉包是可以通路其定義的“外部”範圍的函數。是以,即使閉包函數終止,它也可以通路外部作用域中的值。 以此為例: 上面的代碼表示一個函數傳回另一個函數。但是,調用takeOne并擷取後incrementFunction,即使已經終止incrementFunction,takeOne也會記住的局部變量takeOne。

使用閉包的好處

閉包的第一個好處是将局部變量保留在範圍内。由于JavaScript函數是一等公民,是以開發人員經常會遇到名稱沖突,這将導緻意外輸出。使用閉包可以幫助将該範圍内的名稱空間保留為私有變量。你可以在過去的jQuery代碼中看到很多東西,其中定義了click方法。 盡管這确實是閉包的用例之一,但你可能會想:“這真的是閉包的目的嗎?” 你可能仍然對有關閉包的一般用例是什麼的說法提出疑問。 第二個好處是更多在一般情況下使用,它在異步環境中很有用。 想象一下,如果你需要周遊數組中的值: 該程式的輸出是什麼? 它列印3三遍。由于setTimeout是異步的,是以在循環結束時,外部作用域i也已更改為3,并且setTimeout在循環期間對後續調用将觸發回調并3次列印。 你将如何解決這個問題? 有很多方法,包括使用ES6文法let而不是var在塊級别定義其範圍并解決問題。但是,如果他們希望你在不使用任何ES6功能的情況下解決此問題,則閉包是你的答案。 通過僅在外部建立另一個外部函數setTimeout,就可以定義一個閉包。該i值即使printSomething終止也将保留。然後,回調将列印0 、1、 2到控制台。 這就是JavaScript閉包強大的功能所在。你可以使用閉包在異步環境中保留外部變量的範圍。

再舉另一個例子

讓我們想象一下,另外一個例子,你需要建立一個函數,該函數需要調用第三方API并彙總結果并将其傳回給調用方。 在繼續閱讀解決方案之前,請先暫停片刻,然後思考如何在沒有承諾或異步/等待的情況下解決此問題。 我們可以利用閉包的功能來保留函數的範圍,并aggregateValue通過使用回調來停止傳回。 因為getAPI,getAPIB,getAPIC都使用一個回調函數,你可以建立一個回調函數,稱為迄今為止的API數量的增加數量。一旦調用的API數量超過2,則調用傳回回調值。 上面的代碼再次利用了閉包的功能來在觸發閉包函數時保留其局部變量。作為getAPI完成其打電話,喚起了回調函數,回調函數通路外部範圍aggregateValue遞增計數的API完成執行的數量。在aggregateData随後與來自外部的回調傳回aggregateValue,從所有的第三方API需要所有的彙集資料的功能。 運作此功能:

總結

閉包是javaScript的“更進階”功能。閉包的一般用例在于在異步環境中求解計算。最後,感謝閱讀。

Dreamwear如何建立javascript_JavaScript閉包到底有什麼特别之處?使用閉包的好處再舉另一個例子總結
Dreamwear如何建立javascript_JavaScript閉包到底有什麼特别之處?使用閉包的好處再舉另一個例子總結

繼續閱讀