如何理解JavaScript中的變數提升

JavaScript中的變數提升就是變數和函數的宣告會跑到程式碼的最前面，但是實際上變數和函數宣告的位置並不會動，只是在編譯過程中放入了記憶體之中。

JavaScript雖然是一種解釋型語言，但是在Web開發中在執行之前有一個重要的步驟就是解釋器瀏覽程式碼並識別聲明的所有變量，記下何時它們被重新分配，並將程式碼區塊劃分為三個層級的範圍：區塊，函數和全域。接下來就將為大家詳細介紹JavaScript中的變數提升，希望對大家有幫助

#【推薦課程：JavaScript教學】

#

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

效果圖：

上述範例中函數的範圍包括變數x，因此變數只在該函數中已知。如果在全域範圍內存取它就會報錯，因為x不是宣告的變數。

如果將x的宣告移到函數之外，它將在全域範圍中，在函數外或函數內都可以使用。

範例

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

效果圖：

隨著ES6的出現，引入了兩種提升變數的新方法：let和const方法。這些方法可以對變數可用的範圍進行更細緻的控制。 let和const定義的局部變量，僅可在他們定義的層級中使用

變數提升

在下面的例子中，x聲明了var ，並且x在整個函數中和子塊中都呼叫了相同變數。如果x用let或const聲明，那麼外部範圍將無法存取它，如果我們再次在子模組中聲明let x;實際上它是一個不同的變數了

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;}

在此函數中，宣告bar被提升到作用域的頂端。實際上它是這樣執行的：

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

這就是為什麼console.log(bar)的結果是undefined，而console.log(foo)會報錯

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

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

和：

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

在第一個例子中，雖然var num是在分配之後聲明的，但是從電腦的角度來看，它注意到我們已經早全局中聲明了它，就會將聲明放到頂部，然後繼續執行其餘的程式碼。在第二個範例中，即使我們在定義它之前呼叫/呼叫該函數，該定義也會被提升到作用域的頂部，所以當我們實際開始執行程式碼時，解釋器已經知道它是什麼dogName() 。

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

總結：以上就是這篇文章的全部內容了，希望對大家學習變數提升有所幫助。

以上是如何理解JavaScript中的變數提升的詳細內容。更多資訊請關注PHP中文網其他相關文章！