1. 程式人生 > >JavaScript 聲明提前機制

JavaScript 聲明提前機制

console www 函數 ali 代碼 優先 位置 .html href

聲明提前機制

在JavaScript存在著這樣一種預處理機制,即瀏覽器在解析JS代碼時會將var聲明的變量和function聲明的函數提升到當前作用域的頂部。但是解析JS代碼時對var和function關鍵字聲明的對象的處理是不一樣的:前者在解析時只是將聲明提前了,但是賦值卻依舊在原來的位置。而後者不僅將聲明提前了,而且將定義也完成。具體請看下面的例子:

1 console.log(hello);         //undefined
2 sayHi();                    //hi
3 
4 var hello = "hello";
5 console.log(hello);         //
hello 6 7 function sayHi() { 8 console.log("hi"); 9 }

在第一行輸出一個在下面用var聲明並且賦值的hello變量,沒有報錯但是輸出的是undefined,說明hello變量的聲明確實是被提前了但是沒有賦值,所以輸出的是undefined。正是因為給變量賦值依舊在原來的位置,所以第五行輸出hello變量可以正常輸出。在處理function定義的sayHi函數時,sayHi的聲明被提前了,同時也對它進行了定義,所以在第二行調用sayHi時正常輸出hi而不是報 sayHi is not defined 或者sayHi is not a function的錯。

函數聲明優先於變量聲明

需要註意的是:函數聲明優先於變量聲明,看下面例子:

1 console.log(sayHi);         // ? sayHi() { console.log("hi"); }
2 
3 var sayHi = "sayHi";
4 function sayHi() {
5     console.log("hi");
6 }
7 
8 console.log(sayHi);         // sayHi

先用var聲明變量sayHi並賦值為"sayHi",然後用function再將sayHi重新聲明為一個函數。在聲明的前後輸出sayHi,發現前面輸出的是一個函數,後面輸出的是一個字符串"sayHi"。顯然可以看出函數聲明是優先於變量聲明的。

這篇博客正好也解釋了我之前寫的一篇函數聲明與函數表達式的區別,感興趣的可以去看一下。

JavaScript 聲明提前機制