再談Js閉包

cuieney 發布于2019-08-20 11:36 / 2457人閱讀

摘要：不知不覺距離上一篇閉包文章已經過了個月了，現在的理解對比之前要健壯的多，再次總結下花生理解的閉包。這一段代碼很重要，理解這一段代碼基本上就可以說理解閉包了。

不知不覺距離上一篇閉包文章已經過了8個月了，現在的理解對比之前要健壯的多，再次總結下花生理解的閉包。

閉包實際上就是子作用域讀取父作用域的變量，這本來很合理也很簡單，但是關鍵點在于這個讀取是動態的，請看下面的例子：

for(var i=0 ;i<3 ;i++){
    setTimeout(function(){
        console.log(i);
    });
};
// 輸出 3 3 3

結果并不是期望的0 1 2，因為是動態的讀取i，因此如果你在下文改變變量i也依舊會影響到輸出讀取i。

傳統的解決方案是構建閉包，是最有效也是兼容性最好的方法

for(var i=0 ;i<3 ;i++){
    (function(num){
        setTimeout(function(){
            console.log(num);
        });
    })(i);
};
// 輸出 0 1 2

這么做是十分有效的，為每一個閉包多帶帶創建一個作用域，也是下面要說的其他解決方案的基礎。

這一段代碼很重要，理解這一段代碼基本上就可以說理解閉包了。

實際上，大多數情況我們并不是想單純是使用for循環，for循環的一個很常見的用處是遍歷數組。

var arr =["a" ,"b" ,"c"];
for(var i=0 ;i
因為是動態讀取，所以輸出undefined很正常。可以使用上面的構建一個自執行函數來解決，但還有一個更方便的解決方案，也是實際開發中經常用到的。
["a" ,"b" ,"c"].forEach(function(item){
    setTimeout(function(){
        console.log(item);
    });
});
// 輸出 a b c
利用Array原生的forEach可以更好的實現，而且也符合語義，這個是花生最推薦的用法。
如果瀏覽器較新支持ES5，Function還提供一個bind方法來綁定參數
for(var i=0 ;i<3 ;i++){
    setTimeout(console.log.bind(null ,i));
};
// 輸出 0 1 2
Function.bind具體的語法與兼容性可以參考MDN。
還有其他的“歪門邪道”的解決方案，比如利用閉包讀取到父作用域的集合，在集合里尋找“自己”，或者是利用js的引用傳遞等等。
實際上，利用ES5的bind方法和Array的forEach就已經可以解決所有問題了，所以在實際開發中應該避免第一種構建閉包的解決方案。

GPU云服務器云服務器 js閉包 js閉包的理解 js面試閉包如何回答 js閉包qq空間

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80664.html

再談閉包-詞法作用域

摘要：權威指南第六版關于閉包的說明采用詞法作用域，也就是說函數的執行依賴于變量的作用域，這個作用域是在函數定義時決定的，而不是函數調用時決定的。閉包這個術語的來源指函數變量可以被隱藏于作用域鏈之內，因此看起來是函數將變量包裹了起來。最近打算換工作，所以參加了幾次面試(國內比較知名的幾家互聯網公司)。在面試的過程中每當被問起閉包，我都會說閉包是作用域的問題？令人驚訝的是幾乎無一例外的當我提到...

Ku_Andrew 2019-08-21 13:32 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
JavaScript系列——JavaScript同步、異步、回調執行順序之經典閉包setTimeou

摘要：同步異步回調傻傻分不清楚。分割線上面主要講了同步和回調執行順序的問題，接著我就舉一個包含同步異步回調的例子。同步優先回調內部有個，第二個是一個回調回調墊底。異步也，輪到回調的孩子們回調，出來執行了。同步、異步、回調？傻傻分不清楚。大家注意了，教大家一道口訣：同步優先、異步靠邊、回調墊底（讀起來不順）用公式表達就是：同步 => 異步 => 回調這口訣有什么用呢？用來對付面試的...

lewif 2019-08-29 12:21 評論0 收藏0