【前端工程師手冊】JavaScript作用域拾遺

flyer_dev 發布于2019-08-22 17:08 / 3553人閱讀

摘要：昨天總結了一些作用域的知識前端工程師手冊之作用域，但是發表完發現忘記了一些東西，今天拾個遺。循環完畢之后，，且此時生成了個匿名函數，由于這個匿名函數處在同一個詞法作用域中，所以他們引用同一個，所以當他們執行時，自然而然就會打出。

昨天總結了一些作用域的知識【前端工程師手冊】JavaScript之作用域，但是發表完發現忘記了一些東西，今天拾個遺。
昨天說到了JavaScript中沒有塊級作用域，其實在es6中是有的。

es6中的塊級作用域

先舉個栗子：

var foo = true;
if (foo) {
    let bar = foo * 2;
    bar = something( bar ); 
    console.log(bar);
 }
 console.log( bar );  // ReferenceError

這個是let最直觀的作用，在一對大括號中創建了塊級作用域，bar會在大括號中的代碼執行完畢后銷毀。
再舉個栗子：

for(var i = 1;i <= 5;i++) {
    setTimeout(function() {
        console.log(i)
    }, i*1000)
}
// 每隔一秒打印一個6，共打印5次

如果說這段代碼的初衷是間隔1秒打印出1、2、3、4、5的話，結果是令人大跌眼鏡的，真正的結果是每隔1秒打印一次6，打印5次.
為什么會這樣子？首先是因為閉包的原因，閉包后面再說，現在先理解為閉包是一個函數，一個能夠訪問并未在它自己內部定義的變量的函數。
OK，接下來說深層次原因。for循環完畢之后，i=6，且此時生成了5個匿名函數 function(){ console.log(i) }，由于這5個匿名函數處在同一個詞法作用域中，所以他們引用同一個i，所以當他們執行時，自然而然就會打出6。
如何解決？

for(let i = 1;i <= 5;i++) {
    setTimeout(function() {
        console.log(i)
    }, i*1000)
}
// 間隔一秒分別打印出1、2、3、4、5

把var換成let聲明就可以了。
《你不知道的JavaScript-上卷》中解釋道：

for 循環頭部的 let 不僅將 i 綁定到了 for 循環的塊中，事實上它將其重新綁定到了循環的每一個迭代中，確保使用上一個循環迭代結束時的值重新進行賦值。

說白了就是再每次迭代內部，都會對 i 進行隱形的重新賦值，且使用的是上一個迭代結束時的值來對 i 進行重新賦值。
差不多就是這樣的：

for(let i = 1;i <= 5;i++) {
    let i = 上次迭代結束的i
    setTimeout(function() {
        console.log(i)
    }, i*1000)
}

所以5個匿名函數引用的并不是同一個i，自然就會順利的間隔一秒分別打印出1、2、3、4、5了

參考資料：
你不知道的JavaScript-上卷
let-MDN

GPU云服務器云服務器 javascript作用域鏈 javascript手冊 javascript入門手冊 javascript使用手冊

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

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

【前端工程師手冊】this拾遺之關于箭頭函數的種種

摘要：之前總結了的一些常見綁定情況前端工程師手冊之的筆記，但是還有一些沒有說到，今天繼續學習一下。參考資料箭頭函數你不知道的上卷之前總結了this的一些常見綁定情況（【前端工程師手冊】JavaScript之this的筆記），但是還有一些沒有說到，今天繼續學習一下。 es6箭頭函數先說結論：箭頭函數沒有自己的this，它是根據外層(函數或者全局，后面會說到箭頭函數作為某個對象的方法時的情況...

oogh 2019-08-26 11:55 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

snowLu 2019-08-29 14:05 評論0 收藏0
JavaScript基礎拾遺

摘要：由于網景公司希望能在靜態頁面上添加一些動態效果，于是叫這哥們在兩周之內設計出了語言。所以簡單說來就是，是一種語言標準，而是網景公司對標準的一種實現。 JavaScript基礎拾遺 study notes by Tingting 為啥說JavaScript的基礎在平時開發時，我們更多的是在寫PHP的邏輯層，但是在寫后臺時多多少少會寫一寫JavaScript的代碼，有時候我們就會遇到對j...

zhouzhou 2019-08-22 11:15 評論0 收藏0
【前端工程師手冊】JavaScript之作用域

摘要：函數作用域和塊作用域前面講了是詞法作用域，那么什么時候會創建作用域呢主要是基于函數級別的作用域，也就是每一個函數都會創建一個作用域。函數會被當作函數表達式而不是一個標準的函數聲明來處理。什么是作用域來一段《你不知道的JavaScript-上卷》中的原話：幾乎所有編程語言最基本的功能之一，就是能夠儲存變量當中的值，并且能在之后對這個值進行訪問或修改，這些變量住在哪里?換句話說，它...

Paul_King 2019-08-22 17:06 評論0 收藏0