JavaScript中變量提升的方法

這篇文章主要介紹JavaScript中變量提升的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

JavaScript中的變量提升就是變量和函數(shù)的聲明會(huì)跑到代碼的最前面，但是實(shí)際上變量和函數(shù)聲明的位置并不會(huì)動(dòng)，只是在編譯過程中放入了內(nèi)存之中。

JavaScript雖然是一種解釋型語言，但是在Web開發(fā)中在執(zhí)行之前有一個(gè)重要的步驟就是解釋器瀏覽代碼并識(shí)別聲明的所有變量，記下何時(shí)它們被重新分配，并將代碼塊劃分為三個(gè)級(jí)別的范圍：塊，函數(shù)和全局。接下來就將為大家詳細(xì)介紹JavaScript中的變量提升，希望對大家有所幫助

例：

function exampleFunction() { 
 var x = "declared inside function";
 console.log("Inside function"); 
 console.log(x);
 }
 console.log(x);

效果圖：

上述例子中函數(shù)的范圍包括變量x，因此變量僅在該函數(shù)中已知。如果在全局范圍內(nèi)訪問它就會(huì)報(bào)錯(cuò)，因?yàn)閤不是聲明的變量。

如果將x的聲明移到函數(shù)之外，它將在全局范圍中，在函數(shù)外或函數(shù)內(nèi)都可以使用。

例

var x = "declared outside function";
exampleFunction();
function exampleFunction() { 
 console.log("Inside function");
 console.log(x);}
 console.log("Outside function");
 console.log(x);

效果圖：

隨著ES6的出現(xiàn)，引入了兩種提升變量的新方法：let和const方法。這些方法可以對變量可用的范圍進(jìn)行更細(xì)致的控制。let和const定義的局部變量，僅可在他們定義的級(jí)別中使用

變量提升

在下面的例子中，x聲明了var，并且x在整個(gè)函數(shù)中和子塊中都調(diào)用了相同變量。如果x用let或者const聲明，那么外部范圍將無法訪問它，如果我們再次在子模塊中聲明let x;實(shí)際上它是一個(gè)不同的變量了

function varTest() { 
 var x = 1; 
 if (true) { 
   var x = 2;  
   console.log(x); // 2 
 }
 console.log(x); // 2 
 }
 function letTest() {
 let x = 1; 
 if (true) {
   let x = 2; 
   console.log(x); // 2
 }
 console.log(x); // 1}

例：

function doSomething() {
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 var bar = 1; 
 let foo = 2;}

在此函數(shù)中，聲明bar被提升到作用域的頂部。實(shí)際上它是這樣執(zhí)行的：

function doSomething() {
 var bar;
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 bar = 1; 
 let foo = 2;}

這就是為什么console.log(bar)的結(jié)果是undefined，而console.log(foo)會(huì)報(bào)錯(cuò)

這使得這樣的事情成為可能：

num = 6;
console.log(num); // returns 6
var num;

和：

dogName("Watson");
function dogName(name) {
 console.log("My dog's name is " + name);
 }

在第一個(gè)例子中，雖然var num是在分配之后聲明的，但是從計(jì)算機(jī)的角度來看，它注意到我們已經(jīng)早全局中聲明了它，就會(huì)將聲明放到頂部，然后繼續(xù)執(zhí)行其余的代碼。在第二個(gè)例子中，即使我們在定義它之前調(diào)用/調(diào)用該函數(shù)，該定義也會(huì)被提升到作用域的頂部，所以當(dāng)我們實(shí)際開始執(zhí)行代碼時(shí)，解釋器已經(jīng)知道它是什么dogName()。

注意：對于var變量，只有聲明被提升，而不是賦值。

以上是JavaScript中變量提升的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！