作為一個前端工程師，你必須對JavaScript的作用域不陌生，傳統(tǒng)常見的有函數(shù)級作用域，還有全局作用域，ES6 let const 的塊級作用域，其實還有一個你不知道的塊級作用域，今天小千就來給大家介紹一下。

      我們先來看看下面這個段代碼，請思考一下結(jié)果是什么。

      想必你心中已經(jīng)有了結(jié)果，答案是 3  2

      你答對了嗎？答案結(jié)果是否有些意外呢？

      好了，我們來看看為什么會出現(xiàn)這個答案？首先我們需要先了解以下基本知識。

      聲明提前

      聲明提前指的是JS引擎在執(zhí)行之前對代碼進(jìn)行的預(yù)解析(為了提高執(zhí)行效率) 具體的來說就是使用(var)聲明變量和(function)聲明的函數(shù)正預(yù)編譯階段將其提升到了作用域的頂部

      全局變量聲明

      函數(shù)作用域變量聲明

      函數(shù)聲明

      函數(shù)表達(dá)式聲明

      函數(shù)塊級作用域

      通過下面代碼我們可以知道 變量的聲明是沒有塊級作用域的，if語句塊中聲明的變量foo會提升到全局作用域并初始化值為undefined

      我們再看看函數(shù)的情況

      上面這個例子告訴我們 函數(shù)foo提升到了if語句塊的頂部，但是沒有提升到全局作用域的頂部。但全局作用域中存有一個名為foo的變量 在代碼執(zhí)行后同步成了函數(shù)foo

      同步？為什么會有同步？我們來看看觀察上帝視角的神器 ———— 斷點調(diào)試。我這邊監(jiān)聽了 foo 變量和 window.foo 大家請注意一下它的變化。同時我們也關(guān)注一下 Scope 作用域

      我們看到Scope中只有全局作用域 foo和window.foo的只都是undefined

      代碼執(zhí)行到if語句塊中 我們再Scope中又發(fā)現(xiàn)了一個新的塊級作用域 當(dāng)前塊級作用域foo的值被賦值為一個函數(shù)(函數(shù)提升) 而全局作用域中的foo依舊是undefined

      代碼繼續(xù)往后執(zhí)行 執(zhí)行函數(shù)的賦值 block作用域依然存在 我把幾個變量的值使用箭頭進(jìn)行了對應(yīng)

      神奇的地方來了 在函數(shù)執(zhí)行賦值后 塊級作用域消失 而全局變量的foo同步成了剛才塊級作用域的foo

      回歸原題

      我們對foo變量進(jìn)行隔行輸出 看看結(jié)果

      結(jié)合上面斷點測試的結(jié)果大家可以發(fā)現(xiàn)，函數(shù)在代碼塊中聲明會提前到塊級作用域頂部，預(yù)編譯結(jié)束后開始執(zhí)行代碼 在執(zhí)行階段任然會執(zhí)行函數(shù)的賦值操作，其實是函數(shù)賦值的第二次執(zhí)行(第一次在預(yù)編譯階段) 第二次的賦值執(zhí)行的意義是確認(rèn)當(dāng)前 函數(shù)/全局 作用域能準(zhǔn)確的檢索到函數(shù) 所以講函數(shù)同步到了 當(dāng)前的函數(shù)或全局作用域中。

      好了本次解析就到這里，還有不明白的小伙伴可以copy代碼去進(jìn)行斷點測試，相信很快你能理解其中奧秘。 

      學(xué)習(xí)web前端，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對從零基礎(chǔ)小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對學(xué)習(xí)web前端開發(fā)需要掌握的知識有個清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~