JavaScript 中提升的奧秘！-js教程-PHP中文網

JavaScript 中提升的奧秘！

Susan Sarandon

發布： 2024-12-27 00:39:11

原創

805 人瀏覽過

Mystery of Hoisting in JavaScript!

JavaScript 充滿了怪癖，而提升是容易讓新手感到困惑的怪癖之一。但不用擔心，讀完這篇文章後，您將對簡化的提升有一個清晰的了解！

什麼是吊掛？？

本質上，提升是 JavaScript 將聲明移動到其作用域頂部的預設行為。這並不意味著程式碼在物理上被重新排列——這只是 JavaScript 引擎解釋它的方式。

這樣想：在 JavaScript 開始執行程式碼之前，它會透過預先為所有變數和函數分配記憶體來“準備”，甚至在執行一行程式碼之前也是如此。

關於吊掛的常見誤解

僅提升變數。
?? 不正確
函數宣告和變數宣告都被提升。

提升的變數會自動初始化。
?? 又錯了
變數被提升但未初始化。在明確分配之前，它們的值保持未定義。

透過範例了解提升？

1。變數提升
讓我們從使用 var:
宣告的變數開始

console.log(greeting); // Output: undefined
var greeting = "Hello, World!";

登入後複製

這裡發生了什麼事？ JavaScript 在執行過程中會這樣對待程式碼：

var greeting; // Declaration is hoisted
console.log(greeting); // Accesses the variable before initialization
greeting = "Hello, World!"; // Initialization happens here

登入後複製

但是對於 let 和 const，情況就不同了：

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "Sudhil";

登入後複製

使用 let 或 const 宣告的變數會被提升，但它們處於「臨時死區」(TDZ)，直到遇到它們的聲明。

2。函數提升
函數宣告完全提升，它們的名稱和主體都在宣告行之前可用：

sayHello(); // Output: "Hello!"

function sayHello() {
    console.log("Hello!");
}

登入後複製

但是，函數表達式的行為有所不同：

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

var sayHi = function () {
    console.log("Hi!");
};

登入後複製

在這種情況下，變數 sayHi 被提升，但在達到賦值之前不會初始化。

3。等級提升
類別的行為與 let 和 const 類似。它們已被吊起，但在聲明之前無法訪問。

const instance = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        this.name = "Classy!";
    }
}

登入後複製