前端面試之Js預編譯

js預編譯是前端平時面試筆試題的必考題，預編譯能夠很大程度的考察面試者的js基礎，所以也是現如今各大公司的熱門考點。

javascript預編譯

面對這種考點時，有些人總喜歡刷題，想通過題海戰術來解決問題。但是這種做法是非常費時間的，只有掌握了真正的方法，才能事半功倍。

那麼什麼是預編譯呢？其實預編譯就是js代碼執行過程中的一個階段，那麼js代碼執行的過程是怎麼樣的呢？

js代碼執行步驟主要有三個階段：

1. 首先是檢查代碼通篇的語法錯誤
2. 其次就是js的預編譯過程了
3. 最後就是代碼的實際執行過程（解釋一行，執行一行）

下面簡單的看一段代碼（預熱一下）：

(a) test() function test() { console.log(1) // 1 } (b) console.log(a); // undefined var a ; 函數申明整體提升，變量只有申明提升，賦值不提升 (c) console.log(a) // function a(a){} function a(a){} var a = 1 (d) var a = 1 b = 2 console.log(window.b) // a = window.a // b = window.b

上面一共列出了四個例子，每個例子針對不同的情況：

• （a）主要考察了函數整體提升；
• （b）主要考察了變量申明提升；
• （c）把a和b融合在一起了，進行聯合考察；
• （d）就比較常見了，全局變量掛載window。

上面這幾種情況是非常簡單的題型，如果沒有解題方法，遇到這種題應該還能夠解決，一旦遇到比較複雜的題就得碰運氣了。

類似如下：

(a) function test(){ var a = b = 1 // 1.先聲明 var a // 2.1賦值給b // 3.b的值賦值給a } console.log(a) // error console.log(window.a) // undefined console.log(b) // 1 console.log(window.b) // 1 (b) function test(a) { console.log(a) // function a() {} var a = 1 console.log(a) // 1 function a() {} console.log(a) // 1 var b = function () {} console.log(b) // function(){} function d() {} } test(2)

這兩道題就比剛才的題複雜多了，但是如果沒有解題方法，還是很難全部做對的。答案已經給出來了，可以先對照著看一下，看自己能做對多少。

怎麼做呢？

解題方法來了（敲黑板），預編譯根據作用域劃分，主要有兩種環境，第一種是函數預編預，另外一種就是全局上下文了。那麼這兩種情況應該怎麼辦呢？

函數預編譯：AO activation object (活躍對象，函數上下文)

function test(a) { console.log(a) // function a() {} var a = 1 console.log(a) // 1 function a() {} console.log(a) // 1 var b = function () {} console.log(b) // function(){} function d() {} } test(2) 執行過程 AO = { } <-預編譯過程-> 第一步：尋找形參和變量申明 AO = { a: undefined, b: undefined } 第二步：實參賦值給形參 AO = { a: undefined -> 2, b: undefined } 第三步：尋找函數體的申明，並賦值 AO = { a: undefined -> 2 -> function a() {}, b: undefined, d: function d() {} } <-代碼執行過程-> 第四步：執行函數體第一句 // console.log(a)：function a(){} 第五步：執行函數體第二局 //a = 1 AO = { a: undefined -> 2 -> function a() {} -> 1, b: undefined, d: function d() {} } ....

以上流程圖可以清晰的看明白整個解題的思路，遇到函數域的預編譯題時就可以按照這個步驟去解題，百試不爽。

全局預編譯：GO global object 全局上下文

(a) var a = 1 function a() { console.log(2) } console.log(a) // 1 GO = { a: undefined -> function a(){} -> 1 } 其實GO就是window，即GO === window (b) console.log(a, b) // function a(){} undefined function a() {} var b = function () {} GO = { b: undefined a: function a(){} }

全局編譯其實類似函數域編譯，只是多了一個global，一般的題型中，全局上下文和函數域的預編譯都是聯合在一起考察。但是總的思路就是：

1. 找變量
2. 找函數申明
3. 執行

一步一步的走向成功

掌握了這個思路，遇到預編譯的題就再也不怕了，希望分享的能夠幫助到大家，如果大家有不同的見解，可以留言探討。

作者的文章有沒有幫助到你？ 單選

0人

0%

非常有幫助

0人

0%

一般

0人

0%

沒有幫助

投票