亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

flyer_dev / 3614人閱讀

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

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

es6中的塊級作用域

先舉個栗子：

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

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

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

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

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/94899.html

相關(guān)文章

  • 【前端工程師手冊】this拾遺之關(guān)于箭頭函數(shù)的種種

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

    oogh 評論0 收藏0

  • 前端知識點整理

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

    Lowky 評論0 收藏0

  • 前端知識點整理

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

    snowLu 評論0 收藏0

  • JavaScript基礎(chǔ)拾遺

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

    zhouzhou 評論0 收藏0

  • 【前端工程師手冊】JavaScript之作用域

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

    Paul_King 評論0 收藏0

發(fā)表評論

0條評論

flyer_dev

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<