淺談JavaScript程式碼預解析
摘要：
最近與同學交流關於js程式碼預解析的問題，想想自己當時學的時候也沒有太過注意這個事，所以特意研究了一下，如有不正確的地方敬請各位指教。為了便於理解，文中部分用可能不夠準確，請大家多包涵。
知識點
var
宣告的變數在預解析的時候只執行宣告，不會執行定義，預設值是...
最近與同學交流關於js程式碼預解析的問題，想想自己當時學的時候也沒有太過注意這個事，所以特意研究了一下，如有不正確的地方敬請各位指教。為了便於理解，文中部分用可能不夠準確，請大家多包涵。
知識點
-
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
複製程式碼
預解析過程
-
首先預解析到有變數
a存在，因此記錄下a這個名字，和其值undefined -
接著預解析到有函式
a宣告，記錄下函式名a -
但是發現已經記錄了一個
a，因此該操作無效，將函式體與a這個名字相關聯 - 解析完畢
預解析過程程式碼
a = undefined
a = function () { console.log('a') }
預解析結果
-
a = function () { console.log('a') }
執行過程
-
列印變數
a的值function a() { console.log('a') } -
變數
a賦值為10，將原來關聯的函式覆蓋 -
列印變數
a的值10 -
列印變數
a的值10 - 執行完畢
執行過程程式碼
console.log(a) a = 10 console.log(a) 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
複製程式碼
預解析過程
-
首先預解析到有函式
fn宣告，因此記錄fn這個名字，並關聯其函式體 -
接著預解析到變數
fn宣告，記錄下變數名fn -
但是發現已經記錄了一個
fn，因此該操作無效 -
接著預解析到有函式
fn宣告，因此記錄fn這個名字 -
但是發現已經記錄了一個
fn，因此該操作無效，接著關聯其函式體 - 解析完畢
預解析過程程式碼
fn = function () { console.log(1) }
fn = function () { console.log(2) }
預解析結果
-
fn = function () { console.log(2) }