ES6 Class 语法

很多学过 Java/C++ 的同学早就知道”类（class）”，而 JS 在 ES6 才正式引入 class 关键字——它是基于原型链的语法糖：让面向对象的写法更接近其他语言，本质仍是 ES5 那套原型机制。

为什么学习它

• 阅读源码：很多库用 class 定义类。
• 结构清晰：数据 + 方法的封装结构一目了然。
• 为理解框架概念（组件、状态）打好面向对象基础。

新手提示：Vue3 组件推荐用组合式 + <script setup>，基本不需要自己写 class。这里的知识更多用于扩展视野和理解 JS 本质。

class 的写法

以前写法

// ES5 构造函数写法
function Person(name) {
  this.name = name;
}
Person.prototype.say = function () {
  console.log('我是 ' + this.name);
};

const p = new Person('小明');
p.say(); // 我是 小明

现在写法

// ES6 class 写法
class Person {
  constructor(name) {
    this.name = name;
  }

  say() {
    console.log('我是 ' + this.name);
  }
}

const p = new Person('小明');
p.say(); // 我是 小明

要点：

• constructor：类里的”构造函数”，new 时自动执行。
• 类里的方法（如 say）等价于写在原型上。
• 用 new 创建实例。

继承：extends

用 extends 让一个类继承另一个类：

// 示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' 叫了一声');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' 汪汪');
  }
}

子类实例能直接调用父类方法，也能重写（覆盖）父类方法：

// 示例
const d = new Dog('旺财');
d.speak();   // 旺财 汪汪（子类覆盖）

const a = new Animal('小动物');
a.speak();   // 小动物 叫了一声（父类原本）

super：调用父类

在子类的 constructor 和方法里用 super 调用父级版本：

// 示例
class Dog extends Animal {
  constructor(name) {
    super(name);          // 先调父类 constructor，把 name 传过去
    this.legs = 4;        // 再添加子类自己的属性
  }

  speak() {
    super.speak();        // 先执行父类的 speak
    console.log('并且摇尾巴');
  }
}

const d = new Dog('旺财');
d.speak();   // 旺财 叫了一声（父类 speak）
             // 并且摇尾巴

关键规则：

1. 子类构造函数里如果要使用 this，必须先调用 super()（否则报错）。
2. 子类方法里用 super.方法() 调用同名的父类方法。

静态属性 / 静态方法

用 static 定义，属于类本身而非实例：

// 示例
class MathUtil {
  static add(a, b) {
    return a + b;
  }
  static version = '1.0';
}

console.log(MathUtil.add(2, 3)); // 5 —— 直接通过类调用
console.log(MathUtil.version);   // 1.0

实例不能直接访问静态成员。

封装：私有字段

ES6 后续版本用 # 前缀实现私有属性：

// 示例
class Account {
  #balance = 0;          // 私有字段，外面访问不到

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const acc = new Account();
console.log(acc.getBalance()); // 0
acc.deposit(100);
console.log(acc.getBalance()); // 100
acc.#balance; // 报错（私有字段外部不可访问）

（# 私有字段属于较新的语法，现代浏览器和 Node 已支持。）

速查卡片

class 是”面向对象”的关键语法，掌握后读源码、理解框架概念都会轻松很多。