JavaScript 中的提升：可能會欺騙你的簡單概念

提升是最常見的 JavaScript 面試問題之一，通常被認為是適合初學者的概念。然而，它的行為可能具有欺騙性，甚至會導致經驗豐富的開發人員陷入陷阱。

---

什麼是吊掛？

JavaScript 中的提升是一種在編譯階段、程式碼執行之前將變數和函數宣告移到其包含範圍（腳本或函數）頂部的行為。

僅提升聲明，而不提升初始化或賦值。

提升對於變數、函數和類別有不同的行為。讓我們一一了解。

---

變動提升

var 關鍵字的提升

• 使用 var 宣告的變數會被提升，但它們的初始化仍然保留。

console.log(a); // Output: undefined (declaration hoisted, not initialisation)
var a = 5;
console.log(a); // Output: 5

let 和 const 關鍵字的提升

• 用let和const聲明的變數也會被提升，但由於“臨時死區”，在聲明之前它們是不可訪問的。

console.log(b); // ReferenceError: Cannot access 'b' before initialisation
console.log(c); // ReferenceError: Cannot access 'c' before initialisation
let b = 10;
const c = 'alphabet';

---

功能提升

• 函數宣告是完全提升的，這意味著您可以在定義函數之前呼叫它。

greet(); // Output: Hello!
function greet() {
    console.log("Hello!");
}

• 函數表達式（使用 var、let 或 const）未完全提升；僅提升變數聲明，而不提升賦值。

sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
     console.log("Hello!");
};

---

等級提升

• 類別的提升方式與函數不同。在聲明之前使用類別將導致引用錯誤。

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialisation
class MyClass {
    constructor() {
        console.log("Hello from MyClass!");
    }
}

---

好記

• 提升發生在定義變數或函數的範圍內。函數內部宣告的變數被提升到該函數作用域的頂端。

• 對於 let 和 const，從區塊的開頭到遇到變數的宣告之間存在一個「臨時死區」。在此期間，存取該變數會拋出ReferenceError。

---

需要遵循的一些最佳實踐

• 在其作用域的頂部宣告變數和函數，以避免混淆和錯誤。

• 避免在現代 JavaScript 中使用 var；偏好 let 和 const。

• 了解函數宣告和表達式之間的差異以避免錯誤。

---

額外資訊

什麼是暫時死區（TDZ）？

• 臨時死區 (TDZ) 是變數作用域開始到程式碼中宣告之間的時間。在此期間，存取該變數會拋出ReferenceError。

為什麼存在TDZ？

1. 可預測的行為

2. TDZ 確保變數在正確宣告和初始化之前不會被使用。

3. 常見錯誤的預防

4. 如果沒有 TDZ，變數在初始化之前可能會具有未定義或意外的值，從而導致難以調試的問題。

5. 鼓勵聲明式程式碼

6. 透過要求在使用變數之前聲明變數，TDZ 促進了更清晰、更結構化的程式碼。

提升可能看起來是一個簡單的概念，但它的細微差別甚至會讓經驗豐富的開發人員措手不及。透過了解如何在幕後處理聲明，您可以編寫更清晰、更可預測的程式碼，並解決那些棘手的面試問題。請記住，掌握基礎知識是成為 JavaScript 專業人士的第一步！快樂編碼！

以上是JavaScript 中的提升：可能會欺騙你的簡單概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！