了解 JavaScript 引擎在執(zhí)行代碼過程中所做的一些行為是非常必要的，這有助于我們在遇到莫名其妙的調(diào)用時，能夠大致定位問題所在。在我學習了預編譯的相關知識，并基于該文章，引用其中的一段代碼，結合“變量提升”、“函數(shù)提升”的小示例，對其進行詳細的分析，算是留作一份筆記鞏固記憶、加深理解。

代碼

console.log(a)
fn1(1)
var a = 123
console.log(a)
var fn1 = () => {
  console.log(a)
}
function fn1(a) {
  console.log(a)
  var a = 666
  console.log(a)
  function a() {}
  console.log(a)
  var b = function () {}
  console.log(b)
  function c() {}
}
fn1(1)

錯誤的推導會讓你認為上述代碼的打印如下：

如果你判斷首行報錯，那么需要了解變量提升
或者你這樣認為
undefined
undefined
666
[Function: a]
[Function: b]
123
undefined
666
[Function: a]
[Function: b]

實際上，上方的代碼打印如下：

undefined
[Function: a]
666
666
[Function: b]
123
123

詳細分析

1. 創(chuàng)建全局對象 GO

在全局執(zhí)行上下文中，創(chuàng)建全局對象 GO。

2. 加載當前 JS 文件

加載并解析當前的 JavaScript 文件。

3. 腳本語法分析

進行語法分析，確保代碼沒有語法錯誤。

4. 當前 JS 文件預編譯

4-1. 查找變量聲明

GO = {
  a: undefined
}

4-2. 查找函數(shù)聲明（除了函數(shù)表達式）

GO = {
  a: undefined,
  fn1: function fn1(a) {}
}

5. 正常執(zhí)行（執(zhí)行到函數(shù)調(diào)用前）

console.log(a) // 打印 undefined
fn1(1) // 執(zhí)行到這里了，小心，函數(shù)也有預編譯，執(zhí)行前一刻完成

6. 函數(shù)預編譯

6-1. 創(chuàng)建活躍對象 AO

AO = {}

6-2. 查找變量和形參

AO = {
  a: undefined,
  b: undefined
}

6-3. 實參值和形參統(tǒng)一

AO = {
  a: 1,
  b: undefined
}

6-4. 查找函數(shù)（非函數(shù)表達式）

AO = {
  a: function a() {},
  b: undefined,
  c: function c() {}
}

7. 正常執(zhí)行函數(shù)（根據(jù) AO）

console.log(a)  // 打印 function a() {}
var a = 666  // a 改變，AO.a = 666
console.log(a)  // 打印 666
function a() {}  // 該聲明已提升過，不會覆蓋
console.log(a)  // 打印 666
var b = function () {}  // b 改變，AO.b = function () {}
console.log(b)  // 打印 function () {}
function c() {}  // 該聲明已提升過，不會覆蓋

8. 接著執(zhí)行函數(shù)外代碼，執(zhí)行到下個函數(shù)調(diào)用前

fn1(1) // 已講述，上續(xù)
var a = 123  // GO 對象中的 a 改變?yōu)?123（undefined > 123）
console.log(a)  // 打印 123
var fn1 = () => {  // fn1 改變，GO.fn1 = () => {...}
  console.log(a)
}
function fn1(a) {  // 該聲明已提升過（函數(shù)提升），不會覆蓋
  ...
}
fn1(1)  // 執(zhí)行到這里時，預編譯

9. 函數(shù)預編譯

9-1. 創(chuàng)建活躍對象 AO

AO = {}

9-2. 查找變量和形參

AO = {
  a: undefined
}

9-3. 實參值和形參統(tǒng)一

AO = {
  a: 1
}

9-4. 查找函數(shù)（非函數(shù)表達式）

AO = {
  a: 1
}

10. 正常執(zhí)行函數(shù)（根據(jù) AO）

console.log(a)  // a 不存在當前函數(shù)作用域，往上級查找，找到 GO.a，打印 123

總結

• 全局預編譯：創(chuàng)建 GO 對象，查找變量聲明和函數(shù)聲明。
• 函數(shù)預編譯：創(chuàng)建 AO 對象，查找變量和形參，實參值和形參統(tǒng)一，查找函數(shù)聲明。
• 執(zhí)行階段：按照代碼順序執(zhí)行，變量賦值和函數(shù)調(diào)用。