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

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

想必你心中已經有了結果，答案是 3 2

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

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

聲明提前

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

全局變量聲明

函數作用域變量聲明

函數聲明

函數表達式聲明

函數塊級作用域

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

我們再看看函數的情況

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

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

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

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

代碼繼續往后執行 執行函數的賦值 block作用域依然存在 我把幾個變量的值使用箭頭進行了對應

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

回歸原題

我們對foo變量進行隔行輸出 看看結果

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

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

本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的web前端教程之JavaScript的作用域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。