JavaScript 中提升的奥秘！

# Web 开发# 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!";
    }
}

为什么提升很重要？🔥

**1. 预测行为**

了解提升可以帮助您预测代码的运行方式，并避免常见的陷阱，例如在初始化之前使用变量。

**2. 干净的代码**

为避免混淆，请在变量和函数的作用域顶部声明它们。这符合 JavaScript 的提升行为，并使您的代码更具可读性。

总结

以下是关于提升需要记住的内容：🧠

  • 声明（变量、函数和类）被提升；初始化则不会。
  • var 声明与 undefined 一起提升；let 和 const 停留在暂时死区。
  • 函数声明被完全提升，但函数表达式却没有。
  • 提升有助于 JavaScript 引擎理解你的代码，但理解提升可以帮助你编写更好的代码。

    • 感谢阅读！🙌

    继续尝试 JavaScript 怪癖，并继续关注本系列的更多内容。🚀

    祝你编码愉快！🚀👨‍💻✨