JavaScript 提升解釋以提升您的編碼技能-js教程-PHP中文網

JavaScript 提升解釋以提升您的編碼技能

Patricia Arquette

發布： 2024-10-08 06:26:30

原創

943 人瀏覽過

JavaScript Hoisting Explained to Improve Your Coding Skills

JavaScript 是一種經常會讓新手感到困惑的語言。其中一種行為是提升，每個 JavaScript 開發人員都應該理解這個概念，以便編寫更可預測的程式碼。在本文中，我們將探討什麼是提升、它如何與變數和函數配合使用，以及如何避免與之相關的陷阱。

提升是指 JavaScript 將宣告（但不是初始化）移到其作用域頂部的預設行為。這發生在程式碼執行之前的編譯階段。這意味著您可以在程式碼中實際聲明變數和函數之前使用它們。

console.log(myVar); // undefined
var myVar = 5;

登入後複製

在此範例中，您可能會遇到 ReferenceError，因為 myVar 在聲明之前就被使用了。然而，由於提升，實際發生的情況是聲明 var myVar 被移動到其作用域的頂部，而賦值 (myVar = 5) 仍然保留在原位。在內部，JavaScript 將其解釋為：

var myVar;
console.log(myVar); // undefined
myVar = 5;

登入後複製

因此，console.log 運行時 myVar 已定義但尚未賦值，這就是為什麼它輸出 undefined。

讓我們來分解一下提升如何處理不同類型的變數：var、let 和 const。

對於 var，宣告和變數都會被提升。但是，僅移動了聲明，並未移動賦值。

console.log(a); // undefined
var a = 10;

登入後複製

聲明 var a 被提升，但賦值稍後發生，因此 a 在記錄時未定義。

用let和const宣告的變數也會被提升，但它們不會像var一樣被初始化為undefined。相反，它們從作用域開始就進入臨時死區（TDZ），直到遇到聲明為止。

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

登入後複製

此處，b 被提升，但直到執行實際的聲明行後才可用，從而導致引用錯誤。

相同的行為適用於 const，但附加規則是 const 變數必須在宣告時初始化。

函數宣告被完全提升，這表示函數名稱和函數體都被移到作用域的頂端。這允許您在聲明函數之前調用它們。

greet(); // "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

登入後複製

這裡，函數宣告greet被完全提升，因此即使在程式碼到達其定義之前也可以呼叫該函數。

但是，函數表達式的提升方式不同。由於它們被視為賦值，因此僅提升變數聲明，而不提升函數定義。

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

登入後複製

在這種情況下，變數greet被提升了，但是在提升過程中它被賦值為undefined。這就是為什麼在賦值之前呼叫greet()會拋出TypeError。

為避免吊運造成混亂，請遵循以下最佳實務：

在其作用域的頂部聲明變數 – 儘管提升會將聲明移到頂部，但在各自作用域的開頭聲明它們是一個很好的做法。這使您的程式碼更具可讀性和可預測性。
使用 let 和 const 而不是 var – 用 let 和 const 聲明的變數是區塊作用域的，這使得提升行為更清晰並且更不容易出現錯誤。它還減少了在初始化之前意外引用變數的可能性。
組織函數宣告 – 在使用函數之前聲明它們以避免依賴提升行為。