JavaScript中聲明提升的實現方法

這篇文章主要介紹了JavaScript中聲明提升的實現方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

一、概述

JS 中，我們會理所當然地認為代碼是一句一句地執行的，但并不完全正確。

singer = "周杰倫";
var singer; 
console.log(singer); // 周杰倫

sing();  // 故事的小黃花
function sing() {
   console.log("故事的小黃花");
}

以上第一段代碼，如果按照正常流程，后面的 var singer會重新把值默認聲明為 undefined，但結果卻是 '周杰倫'；

以上第二段代碼，會理解成，先執行，后聲明，就會報錯，但結果卻沒有。

以上代碼塊其實是可以改寫成這樣的：

var singer = undefined;
singer = "周杰倫";
console.log(singer); // 周杰倫
function sing() {
   console.log("故事的小黃花");
}
sing();  // 故事的小黃花

這是因為：

JS 定義聲明會在編譯階段進行，賦值和其他操作則是在執行階段進行。

所以，先有聲明，再有賦值和執行，這就是變量和函數的聲明提升。

二、函數聲明優先于變量聲明；

var foo = "bar";
function foo() {
   
}
typeOf(foo);  // string

var foo = "bar";
function foo() {
   
}
typeOf(foo);  // string

無論函數聲明放在變量聲明前，還是后，變量聲明都覆蓋了函數聲明。

三、每個域都會進行聲明提升

以下代碼會輸出 10，是為什么呢？

var foo = 1;
function bar() {
   if (!foo) {
       var foo = 10;
   }
   alert(foo);
}
bar();

因為:

每個域都會進行聲明提升。

上面代碼相當于：

var foo = 1;
function bar() {
   var foo = undefined;
   if (!foo) { // !foo === true
       var foo = 10;
   }
   alert(foo);
}
bar();

四、函數表達式不會聲明提升

首先，什么是函數表達式？

// 函數聲明
function foo() {
   console.log("函數聲明");
}

// 函數表達式
var foo = function() {
   console.log("函數表達式");
}

函數表達式，不會聲明提升，所以：

foo();  // Uncaught TypeError: foo is not a function

// 函數表達式
var foo = function() {
   console.log("函數表達式");
}

總結

JavaScript 中存在一種聲明提升的機制，有變量聲明和函數聲明。JS 引擎會在編譯階段查找每個作用域的聲明，而賦值和運算則在執行時進行。

函數定義分為函數聲明和函數表達式，其中，函數聲明有聲明提升，函數表達式則沒有。

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript中聲明提升的實現方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!