假如技術HR問您JavaScript的“閉包”，嘿嘿嘿，舉這個例子就夠了

fjcgreat 發布于2019-08-19 18:15 / 1473人閱讀

摘要：概念當函數可以記住并訪問所在的詞法作用域時，就產生了閉包，即使函數是在當前詞法作用域之外執行。

概念

當函數可以記住并訪問所在的詞法作用域時，就產生了閉包，即使函數是在當前詞法作用域之外執行。

例子問題

下面的代碼的運行結果和代碼語意上表達的不相符，我們希望它能夠每隔一秒輸出一次，每次輸出對應的數字，即第一秒后輸出1，第二秒后輸出2......
而這段代碼的運行結果是，第一秒后輸出6，第二秒后輸出6......
請解釋原因并且提出修改方案。(包含要點，函數作用域，塊作用域，閉包，let)

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i*1000);
}

答案 解釋原因

var i，實際上聲明了一個全局變量

延遲函數timer必然是在循環結束后才開始執行，循環結束后，i＝6

循環中確實定義了多個延遲函數timer，延遲函數在setTimeout的內部被回調，根據閉包概念，timer在其聲明之外的地方被調用，timer能夠記住并訪問其聲明位置的詞法作用域，存在閉包

實際上timer所記住的詞法作用域就是全局作用域，所以引用輸出的i都是6

修改方案

只要能保證每次循環都能夠創建新的作用域，在新作用域中保存當前i的值即可

所以任何可以創建新作用域的方法都可以達到效果，具體可參考這里，通過分析這段代碼的進化歷程，或許能夠加深您對JavaScript的作用域的理解

常見的做法有

利用具名立即執行函數，每次循環都創建新作用域

for (var i = 1; i <= 5; i++) {
    (function scope(j) {
        setTimeout(function timer() {
            console.log(j);
        }, i * 1000);
    })(i);
}

利用es6 let創建塊作用域

for (var i = 1; i <= 5; i++) {
    {
      let j = i;
      setTimeout(function timer() {
            console.log(j);
        }, i * 1000);
    }
}

總結

根據閉包的概念，只要有回調就會有閉包......
記住這個例子，還怕被問閉包？

后記

最近寫了三篇，參考書籍主要是《你不知道的JavaScript（上卷）》，看完這三篇可以說就相當于看了半本書了，^_^
前端框架層出不窮，不反對使用框架，但一定要有頭頭能駕馭的了它。試想，做前端的人那么多，如果冰河世紀來臨，存活下來的還是那些會寫框架的人，那些只懂框架使用的人就危險了
我快畢業了，但心里慌慌的，所以如果您剛入門，建議還是扎扎實實地學基礎，其實JS基礎遠比您想象的要復雜，千萬別以為自己看了W3C School就覺得自己Ok了，反正我是要再努力下，爭取看得懂牛人的代碼哈
下篇見......

云服務器 GPU云服務器嘿嘿嘿公有云私有云的區別舉例子 php怎么舉例子 javascript閉包

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

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

來！我們一起來從頭開始構建自己的JavaScript模塊化工具

摘要：能達到一個積木塊模塊的要求。接下來我們將改進它。結尾到此，我們自己構建了一個很實用的模塊化工具，項目的源碼在這里，喜歡的話，給個。前言希望編寫程序能像玩積木一樣，首先規劃要產出怎樣的作品，然后在積木堆中挑選合適的積木塊，最后一組合就完工了。于是JavaScript需要類似這樣模塊化，每個模塊都隱藏內部細節并且對外暴露接口，再處理好模塊之間的依賴關系，就可以達到玩積木的效果了。雖...

AaronYuan 2019-08-19 18:26 評論0 收藏0
JavaScript閉包，只學這篇就夠了

摘要：當在中調用匿名函數時，它們用的都是同一個閉包，而且在這個閉包中使用了和的當前值的值為因為循環已經結束，的值為。最好將閉包當作是一個函數的入口創建的，而局部變量是被添加進這個閉包的。閉包不是魔法這篇文章使用一些簡單的代碼例子來解釋JavaScript閉包的概念，即使新手也可以輕松參透閉包的含義。其實只要理解了核心概念，閉包并不是那么的難于理解。但是，網上充斥了太多學術性的文章，對于...

CoderBear 2019-08-21 11:56 評論0 收藏0
深入理解JavaScript，這一篇就夠了

摘要：也就是說，所有的函數和構造函數都是由生成，包括本身。如果只考慮構造函數和及其關聯的原型對象，在不解決懸念的情況下，圖形是這樣的可以看到，每一個構造函數和它關聯的原型對象構成一個環，而且每一個構造函數的屬性無所指。前言　　JavaScript 是我接觸到的第二門編程語言，第一門是 C 語言。然后才是 C++、Java 還有其它一些什么。所以我對 JavaScript 是非常有感情的，畢...

villainhr 2019-08-26 17:04 評論0 收藏0
Kafka參數調優實戰，看這篇文章就夠了！【石杉的架構筆記】

摘要：那這條消息的延遲就是秒鐘。避免一個遲遲湊不滿，導致消息一直積壓在內存里發送不出去的情況。個人公眾號：石杉的架構筆記（ID:shishan100）目錄1、背景引入：很多同學看不懂Kafka參數2、一段Kafka生產端的示例代碼3、內存緩沖的大小4、多少數據打包為一個Batch合適？5、要是一個Batch遲遲無法湊滿咋辦？6、最大請求大小7、重試機制8、持久化機制 1、背景引入：很多同學看不懂k...

cloud 2019-05-23 17:28 評論0 收藏0
postman工具的入門使用,有她就夠了

摘要：安裝此處先省略算了我還是分享一下吧嘿嘿鏈接提取碼至于安裝步驟選擇好安裝路徑直接就可以了了解功能模塊能點進這篇文章的人就不用介紹是用來干什么的了幫助我們本地測試方式本地測試方式本地測試方式測試文件的上傳功能我以文件為例方 ...

freecode 2021-11-18 10:02 評論0 收藏0