34. class 是语法糖吗？背后发生了什么？副本.md

查看飞书原文 ↗2,552 字符

1. 核心概念 (Core Concept)

class 是 JavaScript ES6 (ECMAScript 2015) 引入的一种新的语法，用于定义类。它旨在提供一种更清晰、更简洁的方式来创建对象及其继承。

2. 为什么需要它？ (The "Why")

尽管在 ES6 之前，JavaScript 已经可以通过原型链（Prototype Chain）实现面向对象的编程，但存在以下问题：

语法复杂且易混淆: 使用构造函数和 prototype 来模拟类和继承的语法相对繁琐，不够直观，容易让初学者感到困惑。
难以实现私有属性/方法: 在老旧的语法中，实现真正意义上的私有成员比较困难，通常需要采用闭包等模式来模拟。
代码可读性差: 大量的原型链操作和函数嵌套使得代码结构不清晰，可读性较差。

class 语法糖的引入，极大地提升了代码的可读性和可维护性，使其更接近于传统面向对象语言（如 Java, C++）的类定义方式。

3. API 与用法 (API & Usage)

class 的核心用法包括类的定义、构造函数、方法、静态方法、继承等。

3.1 类定义与构造函数

class MyClass {
  // 构造函数，在使用 new 关键字创建实例时调用
  constructor(value) {
    this.property = value; // 实例属性
  }

  // 实例方法
  myMethod() {
    console.log(this.property);
  }

  // 静态方法，通过类本身调用，而不是实例
  static staticMethod() {
    console.log('This is a static method.');
  }
}

// 创建类的实例
const instance = new MyClass('hello');
instance.myMethod(); // 输出: hello
MyClass.staticMethod(); // 输出: This is a static method.
// instance.staticMethod(); // 错误！静态方法不能通过实例调用

3.2 继承

使用 extends 关键字实现类的继承：

class BaseClass {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

class DerivedClass extends BaseClass {
  constructor(name, age) {
    // 调用父类的构造函数
    super(name);
    this.age = age;
  }

  // 重写父类方法
  greet() {
    // 调用父类的 greet 方法
    super.greet();
    console.log(`I am ${this.age} years old.`);
  }
}

const derivedInstance = new DerivedClass('Alice', 30);
derivedInstance.greet();
// 输出:
// Hello, Alice
// I am 30 years old.

4. 关键注意事项 (Key Considerations)

只是语法糖: class 语法本质上仍然是基于 JavaScript 原型链的实现。它没有引入新的底层面向对象机制，只是提供了一种更方便、更易读的方式来使用现有的原型链。
没有真正的“类”概念: 与传统面向对象语言不同，JavaScript 并没有真正的“类”的概念。class 定义的其实是一个构造函数，并且它定义的方法都挂载在构造函数的原型 (prototype) 上。
类声明不会被提升: 与函数声明不同，类声明（class MyClass { ... }）不会像函数声明那样被提升到作用域顶部。在使用 class 声明类之前，必须先声明它。
严格模式: class 的主体内部默认处于严格模式 ("use strict") 下，无需显式声明。这意味着在类内部不能使用未声明的变量，this 关键字在静态方法中指向类本身，在实例方法中指向实例，且不允许使用 with 语句等。

5. 参考资料 (References)

MDN Web Docs - 类 (Classes): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
ECMAScript 2015 Language Specification - Classes: https://tc39.es/ecma262/multipage/ecmascript-language-syntax-and-grammar.html#sec-class-definitions (注意：这是规范原文，阅读难度较大)