JavaScript中聲明提升的實現(xiàn)方法

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

一、概述

JS 中，我們會理所當(dāng)然地認(rèn)為代碼是一句一句地執(zhí)行的，但并不完全正確。

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

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

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

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

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

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

這是因為：

JS 定義聲明會在編譯階段進(jìn)行，賦值和其他操作則是在執(zhí)行階段進(jìn)行。

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

二、函數(shù)聲明優(yōu)先于變量聲明；

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

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

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

三、每個域都會進(jìn)行聲明提升

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

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

因為:

每個域都會進(jìn)行聲明提升。

上面代碼相當(dāng)于：

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

四、函數(shù)表達(dá)式不會聲明提升

首先，什么是函數(shù)表達(dá)式？

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

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

函數(shù)表達(dá)式，不會聲明提升，所以：

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

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

總結(jié)

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

函數(shù)定義分為函數(shù)聲明和函數(shù)表達(dá)式，其中，函數(shù)聲明有聲明提升，函數(shù)表達(dá)式則沒有。

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