摘要:我們可以這么解決問題在上述代碼中,每次遍歷我們都使用生成一個新的作用域,使得延遲函數(shù)的回調(diào)可以將新的作用域封閉在每個迭代內(nèi)部,每個迭代中都會含有一個具有正確值的變量供我們訪問。
首先需要明確的是,javascript 中沒有塊作用域,只有函數(shù)作用域。到底什么是閉包?
function foo() { var a = 2; function bar() { console.log(a); // 2 } bar(); } foo();
這是閉包嗎?
技術(shù)上來講也許是,但確切地說并不是。
我認為最準確地用來解釋 bar() 對 a 的引用的方法是詞法作用域的查找規(guī)則,而這些規(guī)則只是閉包的一部分。(但卻是非常重要的一部分!)
function foo() { var a = 2; function bar() { console.log(a); // 2 } return bar; } var baz = foo(); baz(); // 2
這才是閉包的效果!
在上例中函數(shù) bar 在定義自己的詞法作用域以外的地方執(zhí)行,在 foo 執(zhí)行后垃圾回收器不知道 bar 什么時候會被調(diào)用,這使得對 foo 內(nèi)部作用域的回收工作被阻止,而 bar 依然持有對該作用域的引用,這個引用就叫做閉包。
無論通過何種手段將內(nèi)部函數(shù)傳遞到所在的詞法作用域以外,它都會持有對原始定義作用域的引用,無論在何處執(zhí)行這個函數(shù)都會使用閉包。循環(huán)與閉包
要說明閉包,for 循環(huán)是最常見的例子。
for (var i = 0; i < 10; i++) { console.log(i); }
執(zhí)行上述代碼我們可以打印出0到9十個數(shù)字,但是如果執(zhí)行下面這段代碼呢?
for (var i = 1; i <= 5; i++) { setTimeout(function () { console.log(i); }, i * 1000); }
正常情況下,我們對這段代碼行為的預(yù)期是分別輸出數(shù)字 1~5,每秒一次,每次一個。
但實際上,這段代碼在運行時會以每秒一次的頻率輸出五次 6。
我們可以這么理解問題:眾所周知 javascript 是解釋型的單線程編程語言,上述代碼的執(zhí)行過程實際是,執(zhí)行 for 循環(huán)并把5個匿名函數(shù)的觸發(fā)分別間隔 1-5 秒放入異步隊列當(dāng)中,而當(dāng)異步隊列的頭節(jié)點開始執(zhí)行時,for 循環(huán)早已經(jīng)執(zhí)行完畢,并且此時 i 作為全局作用域中的變量,其值為 6,這時無論異步隊列中的頭節(jié)點還是尾節(jié)點,在打印 i 變量的值并試圖向上層作用域查找 i 時,獲得的結(jié)果都是 6。
我們可以這么解決問題!
for (var i = 1; i <= 5; i++) { (function(j) { setTimeout(function timer() { console.log(j); }, j * 1000); })(i); }
在上述代碼中,每次遍歷我們都使用 IIFE 生成一個新的作用域,使得延遲函數(shù)的回調(diào)可以將新的
作用域封閉在每個迭代內(nèi)部,每個迭代中都會含有一個具有正確值的變量供我們訪問。
用容易理解的語言可以這么描述:IIFE 在執(zhí)行完畢后,不知道延遲函數(shù)的回調(diào)什么時候執(zhí)行,所以 IIFE 的作用域無法被銷毀,其 j 變量的值被鎖住。
塊作用域與閉包熟悉 ES6 的同學(xué)們都知道,下述代碼也可以解決上面的 for 循環(huán)問題:
for (let i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i); }, i * 1000); }
for (let i = 1; i <= 5; i++) 這行代碼的圓括號之間存在一個隱藏的作用域,在每次執(zhí)行循環(huán)體之前,javascript 引擎會把 i 在循環(huán)體的上下文中重新聲明及初始化一次。附錄看到這兒我想大家應(yīng)該有一個比較清楚的認識:解決 for 循環(huán)問題的根本是 塊作用域!無論是 let/const 還是閉包,其本質(zhì)都是在每次遍歷時構(gòu)建一個塊作用域。
至少從 ES3 發(fā)布以來,javaScript 中就有了塊作用域,而 with 和 catch 分句就是塊作用域的兩個小例子。
Tip: let 存在提升,只不過由于暫時死區(qū)的限制,不能在 let x 之前使用 x。
let 的「創(chuàng)建」過程被提升,但是初始化沒有提升
var 的「創(chuàng)建」和「初始化」都被提升
function 的「創(chuàng)建」「初始化」和「賦值」都被提升
const 和 let 只有一個區(qū)別,那就是 const 只有「創(chuàng)建」和「初始化」,沒有「賦值」過程
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/83211.html
摘要:是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內(nèi)部,也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。 作用域與閉包 如何用js創(chuàng)建10個button標簽,點擊每個按鈕時打印按鈕對應(yīng)的序號? 看到上述問題,如果你能看出來這個問題實質(zhì)上是考對作用域的理解,那么恭喜你,這篇文章你可以不用看了,說明你對作用域已經(jīng)理解的很透徹了,但是如果你看不出來這是一道考作用域的題目,...
摘要:是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內(nèi)部,也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。 作用域與閉包 如何用js創(chuàng)建10個button標簽,點擊每個按鈕時打印按鈕對應(yīng)的序號? 看到上述問題,如果你能看出來這個問題實質(zhì)上是考對作用域的理解,那么恭喜你,這篇文章你可以不用看了,說明你對作用域已經(jīng)理解的很透徹了,但是如果你看不出來這是一道考作用域的題目,...
摘要:是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內(nèi)部,也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。 作用域與閉包 如何用js創(chuàng)建10個button標簽,點擊每個按鈕時打印按鈕對應(yīng)的序號? 看到上述問題,如果你能看出來這個問題實質(zhì)上是考對作用域的理解,那么恭喜你,這篇文章你可以不用看了,說明你對作用域已經(jīng)理解的很透徹了,但是如果你看不出來這是一道考作用域的題目,...
摘要:是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內(nèi)部,也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。 作用域與閉包 如何用js創(chuàng)建10個button標簽,點擊每個按鈕時打印按鈕對應(yīng)的序號? 看到上述問題,如果你能看出來這個問題實質(zhì)上是考對作用域的理解,那么恭喜你,這篇文章你可以不用看了,說明你對作用域已經(jīng)理解的很透徹了,但是如果你看不出來這是一道考作用域的題目,...
閱讀 2133·2019-08-30 15:52
閱讀 2509·2019-08-29 18:37
閱讀 868·2019-08-29 12:33
閱讀 2910·2019-08-29 11:04
閱讀 1638·2019-08-27 10:57
閱讀 2160·2019-08-26 13:38
閱讀 2835·2019-08-26 12:25
閱讀 2523·2019-08-26 12:23