淺談JavaScript程式碼預解析
最近與同學交流關於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) }