前端Wiki/JavaScript/深入/原型与 this

class 类

class 是 ES6 给原型体系套上的语法糖，写法更接近 Java 等传统语言，但底层仍是原型。要点：constructor 是构造方法，new 时自动执行；普通方法自动挂在原型上；get/set 定义存取器，像属性一样访问；static 定义静态成员，属于类本身而不是实例。

继承用 extends，子类 constructor 里必须先调用 super()（相当于执行父类构造器）才能使用 this。子类可以覆写父类方法，也可以通过 super.方法名() 复用父类逻辑。

实际前端开发中，class 常用于封装有状态的对象（播放器、动画控制器、数据模型）。配合 #字段 私有字段语法（ES2022），还能实现真正的私有属性。

本节要点class 是原型的语法糖；extends 继承后必须先 super()；static 成员属于类；# 开头的字段是私有属性。

JavaScript

class Animal {
  // 私有字段：外部访问不到
  #secret = '内部数据';

  constructor(name) {
    this.name = name;            // 实例属性
  }
  eat() {                        // 原型方法，实例共享
    console.log(this.name + ' 在吃东西');
  }
  get info() {                   // getter：像属性一样用
    return '这是' + this.name;
  }
  static create(name) {          // 静态方法：类直接调用
    return new Animal(name);
  }
}

class Dog extends Animal {       // 继承
  constructor(name, breed) {
    super(name);                 // 必须先调用父类构造器
    this.breed = breed;
  }
  bark() {
    super.eat && null;           // 可通过 super 调父类方法
    console.log(this.name + '：汪汪');
  }
}

const d = new Dog('旺财', '柴犬');
d.eat();
d.bark();
console.log(d.info);             // 用 getter 不加括号
console.log(Animal.create('小猫').info);
// console.log(d.#secret);       // 报错：私有字段不可访问

🔗 相关词条this 前端继承原型

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读