JavaScript 中的提升：可能會欺騙你的簡單概念-js教程-PHP中文網

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

DDD

發布： 2025-01-04 10:00:34

原創

364 人瀏覽過

Hoisting in JavaScript: The Simple Concept That Can Trick You

提升是最常見的 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!");
    }
}

登入後複製