溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript中實現變量提升和函數提升的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
主要介紹以下幾點：
1. 變量提升
2. 函數提升
3. 為什么要進行提升
4. 最佳實踐
那么，我們就開始進入主題吧。
1. 變量提升
通常JS引擎會在正式執行之前先進行一次預編譯，在這個過程中，首先將變量聲明及函數聲明提升至當前作用域的頂端，然后進行接下來的處理。(注：當前流行的JS引擎大都對源碼進行了編譯，由于引擎的不同，編譯形式也會有所差異，我們這里說的預編譯和提升其實是抽象出來的、易于理解的概念)
下面的代碼中，我們在函數中聲明了一個變量，不過這個變量聲明是在if語句塊中：
function hoistVariable() {
if (!foo) {
var foo = 5;
}
console.log(foo); // 5
}hoistVariable();運行代碼，我們會發現foo的值是5，初學者可能對此不甚理解，如果外層作用域也存在一個foo變量，就更加困惑了，該不會是打印外層作用域中的foo變量吧？答案是：不會，如果當前作用域中存在此變量聲明，無論它在什么地方聲明，引用此變量時就會在當前作用域中查找，不會去外層作用域了。
那么至于說打印結果，這要提到預編譯機制了，經過一次預編譯之后，上面的代碼邏輯如下：
// 預編譯之后
function hoistVariable() {
var foo;
if (!foo) {
foo = 5;
}
console.log(foo); // 5
}
hoistVariable();是的，引擎將變量聲明提升到了函數頂部，初始值為undefined，自然，if語句塊就會被執行，foo變量賦值為5，下面的打印也就是預期的結果了。
類似的，還有下面一個例子：
var foo = 3;
function hoistVariable() {
var foo = foo || 5;
console.log(foo); // 5
}
hoistVariable();foo || 5這個表達式的結果是5而不是3，雖然外層作用域有個foo變量，但函數內是不會去引用的，因為預編譯之后的代碼邏輯是這樣的：
var foo = 3;
// 預編譯之后
function hoistVariable() {
var foo;
foo = foo || 5;
console.log(foo); // 5
}
hoistVariable();如果當前作用域中聲明了多個同名變量，那么根據我們的推斷，它們的同一個標識符會被提升至作用域頂部，其他部分按順序執行，比如下面的代碼：
function hoistVariable() {
var foo = 3;
{
var foo = 5;
}
console.log(foo); // 5
}
hoistVariable();由于JavaScript沒有塊作用域，只有全局作用域和函數作用域，所以預編譯之后的代碼邏輯為：
// 預編譯之后
function hoistVariable() {
var foo;
foo = 3;
{
foo = 5;
}
console.log(foo); // 5
}
hoistVariable();2. 函數提升
相信大家對下面這段代碼都不陌生，實際開發當中也很常見：
function hoistFunction() {
foo(); // output: I am hoisted
function foo() {
console.log('I am hoisted');
}
}
hoistFunction();為什么函數可以在聲明之前就可以調用，并且跟變量聲明不同的是，它還能得到正確的結果，其實引擎是把函數聲明整個地提升到了當前作用域的頂部，預編譯之后的代碼邏輯如下：
// 預編譯之后
function hoistFunction() {
function foo() {
console.log('I am hoisted');
}
foo(); // output: I am hoisted
}
hoistFunction();相似的，如果在同一個作用域中存在多個同名函數聲明，后面出現的將會覆蓋前面的函數聲明：
function hoistFunction() {
function foo() {
console.log(1);
}
foo(); // output: 2
function foo() {
console.log(2);
}
}
hoistFunction();對于函數，除了使用上面的函數聲明，更多時候，我們會使用函數表達式，下面是函數聲明和函數表達式的對比：
// 函數聲明
function foo() {
console.log('function declaration');
}
// 匿名函數表達式
var foo = function() {
console.log('anonymous function expression');
};
// 具名函數表達式
var foo = function bar() {
console.log('named function expression');
};可以看到，匿名函數表達式，其實是將一個不帶名字的函數聲明賦值給了一個變量，而具名函數表達式，則是帶名字的函數賦值給一個變量，需要注意到是，這個函數名只能在此函數內部使用。我們也看到了，其實函數表達式可以通過變量訪問，所以也存在變量提升同樣的效果。
那么當函數聲明遇到函數表達式時，會有什么樣的結果呢，先看下面這段代碼：
function hoistFunction() {
foo(); // 2
var foo = function() {
console.log(1);
};
foo(); // 1
function foo() {
console.log(2);
}
foo(); // 1
}
hoistFunction();運行后我們會發現，輸出的結果依次是2 1 1，為什么會有這樣的結果呢？
因為JavaScript中的函數是一等公民，函數聲明的優先級最高，會被提升至當前作用域最頂端，所以第一次調用時實際執行了下面定義的函數聲明，然后第二次調用時，由于前面的函數表達式與之前的函數聲明同名，故將其覆蓋，以后的調用也將會打印同樣的結果。上面的過程經過預編譯之后，代碼邏輯如下：
// 預編譯之后
function hoistFunction() {
var foo;
foo = function foo() {
console.log(2);
}
foo(); // 2
foo = function() {
console.log(1);
};
foo(); // 1
foo(); // 1
}
hoistFunction();我們也不難理解，下面的函數和變量重名時，會如何執行：
var foo = 3;
function hoistFunction() {
console.log(foo); // function foo() {}
foo = 5;
console.log(foo); // 5
function foo() {}
}
hoistFunction();
console.log(foo); // 3我們可以看到，函數聲明被提升至作用域最頂端，然后被賦值為5，而外層的變量并沒有被覆蓋，經過預編譯之后，上面代碼的邏輯是這樣的：
// 預編譯之后
var foo = 3;
function hoistFunction() {
var foo;
foo = function foo() {};
console.log(foo); // function foo() {}
foo = 5;
console.log(foo); // 5
}
hoistFunction();
console.log(foo); // 3所以，函數的優先權是最高的，它永遠被提升至作用域最頂部，然后才是函數表達式和變量按順序執行，這一點要牢記。
3. 為什么要進行提升
關于為什么進行變量提升和函數提升，這個問題一直沒有明確的答案，不過最近讀到Dmitry Soshnikov之前的一篇文章時，多少了解了一些，下面是Dmitry Soshnikov早些年的twitter，他也對這個問題十分感興趣：
然后Jeremy Ashkenas想讓Brendan Eich聊聊這個話題：
最后，Brendan Eich給出了答案：
大致的意思就是：由于第一代JS虛擬機中的抽象紕漏導致的，編譯器將變量放到了棧槽內并編入索引，然后在（當前作用域的）入口處將變量名綁定到了棧槽內的變量。（注：這里提到的抽象是計算機術語，是對內部發生的更加復雜的事情的一種簡化。）
然后，Dmitry Soshnikov又提到了函數提升，他提到了相互遞歸（就是A函數內會調用到B函數，而B函數也會調用到A函數）：
隨后Brendan Eich很熱心的又給出了答案：
Brendan Eich很確定的說，函數提升就是為了解決相互遞歸的問題，大體上可以解決像ML語言這樣自下而上的順序問題。
這里簡單闡述一下相互遞歸，下面兩個函數分別在自己的函數體內調用了對方：
// 驗證偶數
function isEven(n) {
if (n === 0) {
return true;
}
return isOdd(n - 1);
}
console.log(isEven(2)); // true
// 驗證奇數
function isOdd(n) {
if (n === 0) {
return false;
}
return isEven(n - 1);
}如果沒有函數提升，而是按照自下而上的順序，當isEven函數被調用時，isOdd函數還未聲明，所以當isEven內部無法調用isOdd函數。所以Brendan Eich設計了函數提升這一形式，將函數提升至當前作用域的頂部：
// 驗證偶數
function isEven(n) {
if (n === 0) {
return true;
}
return isOdd(n - 1);
}
// 驗證奇數
function isOdd(n) {
if (n === 0) {
return false;
}
return isEven(n - 1);
}
console.log(isEven(2)); // true這樣一來，問題就迎刃而解了。
最后，Brendan Eich還對變量提升和函數提升做了總結：
大概是說，變量提升是人為實現的問題，而函數提升在當初設計時是有目的的。
至此，關于變量提升和函數提升，相信大家已經明白其中的真相了。
4. 最佳實踐
理解變量提升和函數提升可以使我們更了解這門語言，更好地駕馭它，但是在開發中，我們不應該使用這些技巧，而是要規范我們的代碼，做到可讀性和可維護性。
具體的做法是：無論變量還是函數，都必須先聲明后使用。下面舉了簡單的例子：
var name = 'Scott';
var sayHello = function(guest) {
console.log(name, 'says hello to', guest);
};
var i;
var guest;
var guests = ['John', 'Tom', 'Jack'];
for (i = 0; i < guests.length; i++) {
guest = guests[i];
// do something on guest
sayHello(guest);
}如果對于新的項目，可以使用let替換var，會變得更可靠，可維護性更高：
值得一提的是，ES6中的class聲明也存在提升，不過它和let、const一樣，被約束和限制了，其規定，如果再聲明位置之前引用，則是不合法的，會拋出一個異常。
所以，無論是早期的代碼，還是ES6中的代碼，我們都需要遵循一點，先聲明，后使用。
以上是JavaScript中實現變量提升和函數提升的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
