淺談JavaScript代碼預解析 + 示例詳解

概念

• var 聲明的變量在預解析的時候只執行聲明，不會執行定義，默認值是 undefined。
• function 聲明的函數在預解析的時候會提早聲明而且會同時定義。
• 變量名重複聲明無效
• 預解析過得代碼不會再執行階段執行

示例一

console.log(a);  // 打印函數a函數體（function a() { console.log('a') }）

var a = 10;

console.log(a);  // 10

function a() { console.log('a') }

console.log(a);  // 10
複製代碼

預解析過程

1. 首先預解析到有變量 a 存在，所以記錄下 a 這個名字，和其值 undefined
2. 接着預解析到有函數 a 聲明，記錄下函數名 a
3. 可是發現已經記錄了一個 a ，所以該操做無效，將函數體與 a 這個名字相關聯
4. 解析完畢

預解析過程代碼

1. a = undefined
2. a = function () { console.log('a') }

預解析結果

1. a = function () { console.log('a') }

執行過程

1. 打印變量 a 的值 function a() { console.log('a') }
2. 變量 a 賦值爲10，將原來關聯的函數覆蓋
3. 打印變量 a 的值 10
4. 打印變量 a 的值 10
5. 執行完畢

執行過程代碼

1. console.log(a)
2. a = 10
3. console.log(a)
4. console.log(a)

示例二

console.log(fn)  // 函數fn函數體（function fn() { console.log(2) }）

function fn() { console.log(1) }

console.log(fn)  // 函數fn函數體（function fn() { console.log(2) }）

var fn = 10    

console.log(fn)  // 10

function fn() { console.log(2) }   

console.log(fn)  // 10
複製代碼

預解析過程

1. 首先預解析到有函數 fn 聲明，所以記錄 fn 這個名字，並關聯其函數體
2. 接着預解析到變量 fn 聲明，記錄下變量名 fn
3. 可是發現已經記錄了一個 fn ，所以該操做無效
4. 接着預解析到有函數 fn 聲明，所以記錄 fn 這個名字
5. 可是發現已經記錄了一個 fn ，所以該操做無效，接着關聯其函數體
6. 解析完畢

預解析過程代碼

1. fn = function () { console.log(1) }
2. fn = function () { console.log(2) }

預解析結果

1. fn = function () { console.log(2) }

執行過程

1. 打印變量 fn 的值 function fn() { console.log(2) }
2. 打印變量 fn 的值 function fn() { console.log(2) }
3. 變量 fn 賦值爲10，將原來關聯的函數覆蓋
4. 打印變量 fn 的值 10
5. 打印變量 fn 的值 10
6. 執行完畢

執行過程代碼

1. console.log(fn)
2. console.log(fn)
3. fn = 10
4. console.log(fn)
5. console.log(fn)