Skip to content

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 类定义与构造函数

javascript
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 关键字实现类的继承:

javascript
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)


不知道说啥了很无语了