Class 的定义与继承机制
🎯 引言
掌握 ES6 的 Class 语法后，你就能更优雅地组织前端代码，实现面向对象编程的思想。本文通过实用示例讲解 Class 的定义、继承、方法及静态成员等内容，帮助你理解 ES6 语法的本质，从而写出更易维护、更模块化的代码，提升开发效率。
🚀 什么是 ES6 Class？
在 JavaScript 诞生之初，语言本身是基于原型链（prototype）的，不存在经典的类（class）概念。ES6 引入了 Class 语法，让我们可以用更接近传统面向对象语言（比如 Java、C++）的方式来创建对象和继承。
Class 其实只是语法糖，本质依然是基于原型链实现的。它让代码更清晰，也更容易理解。
🛠️ 如何定义一个 Class？
定义一个 Class 非常简单，只需要用 class 关键字。来看一个简单的例子：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁。`);
}
}
const person1 = new Person('小明', 18);
person1.sayHello();
这里，constructor 是构造函数，创建实例时会自动调用。sayHello 是定义在原型上的方法，所有实例都共享这段代码。
this 绑定，方便实例访问。🌱 继承与子类
Class 支持继承，子类可以继承父类的属性和方法，提升代码复用。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} 在叫`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} 汪汪汪`);
}
}
const dog = new Dog('旺财');
dog.speak();
这里，Dog 继承 Animal，重写了 speak 方法。调用 dog.speak() 时，输出自定义的“汪汪汪”。
super 关键字。例如：class Dog extends Animal {
speak() {
super.speak();
console.log(`${this.name} 汪汪汪`);
}
}
🔍 静态方法和静态属性
Class 也可以定义静态方法和属性，它们属于类本身，而不是实例。
class MathUtil {
static add(a, b) {
return a + b;
}
}
console.log(MathUtil.add(2, 3)); // 5
静态方法不能通过实例调用，只能通过类调用。
💡 实战示例：制作一个简单的计数器组件
假设我们要写一个计数器，可以增加、减少和重置计数。
class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
console.log(`计数器加一，当前值：${this.count}`);
}
decrement() {
this.count--;
console.log(`计数器减一，当前值：${this.count}`);
}
reset() {
this.count = 0;
console.log(`计数器重置，当前值：${this.count}`);
}
}
const counter = new Counter();
counter.increment();
counter.increment();
counter.decrement();
counter.reset();
通过 Class，代码层次清晰，行为方法都绑定在 Counter 这个“类”里，很适合封装组件逻辑。
🧾 小节总结：
- ES6 Class 是语法糖，本质仍是基于原型链的面向对象实现。
- Class 支持继承、静态方法、构造函数，代码更清晰易维护。
- 使用 Class 编写组件时，代码结构更合理，行为更集中。
❓ 知识问答（Q&A）
Q：Class 是什么，和函数构造器有什么区别？
A：Class 是 ES6 提供的语法糖，背后还是原型链实现。它让代码更简洁、更接近传统面向对象写法。
Q：如何在子类中调用父类方法？
A：使用 super 关键字调用父类的构造函数或方法。
Q：静态方法和实例方法有什么区别？
A：静态方法属于类本身，实例方法属于类的实例，静态方法不能通过实例调用。
🧪 小练习：
- 在 Counter 类中新增一个方法
setCount(value)，用来设置计数器的当前值。
class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
console.log(`计数器加一，当前值：${this.count}`);
}
decrement() {
this.count--;
console.log(`计数器减一，当前值：${this.count}`);
}
reset() {
this.count = 0;
console.log(`计数器重置，当前值：${this.count}`);
}
// 在这里添加 setCount 方法
}
- 定义一个类
Shape，包含属性color和方法draw()，继承出Circle类，新增属性radius并实现draw()，打印“画一个红色的圆，半径是 10”。
class Shape {
constructor(color) {
this.color = color;
}
draw() {
console.log(`画一个颜色是${this.color}的形状`);
}
}
// 继承 Shape，实现 Circle 类
🎉 恭喜你已经掌握 ES6 Class 类、继承和静态方法技能啦！面向对象编程从此不再难懂，继续练习，你就是前端高手！