JavaScript面向对象编程：类与继承详解

JavaScript虽本质是基于原型的语言，但通过ES6+的class语法糖实现了清晰直观的面向对象编程体验：借助constructor初始化实例、extends实现继承（需严格调用super）、支持静态方法、私有字段（#）和getter/setter，并保留了原型链的底层机制——这既降低了学习门槛，又不失灵活性与强大扩展性，让你用熟悉的方式写出地道、健壮的JS OOP代码。

JavaScript 实现面向对象编程（OOP）主要靠 class 语法（ES6+）和基于原型的继承机制。虽然 JS 本质是基于原型的语言，但 class 提供了更清晰、接近传统 OOP 的写法，实际仍是语法糖，底层仍操作 prototype。

定义类与实例化对象

用 class 关键字声明类，内部用 constructor() 初始化实例属性，其他方法直接写在类体中（自动挂载到原型上）：

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  speak() {
    console.log(`${this.name} 发出声音`);
  }
}
<p>const dog = new Animal('旺财', 3);
dog.speak(); // 旺财 发出声音
</p>

使用 extends 实现继承

子类通过 extends 继承父类，必须在构造函数中调用 super()（传参给父类 constructor），才能访问 this：

• 子类可重写父类方法（方法覆盖）
• 可用 super.方法名() 调用父类同名方法
• 静态方法、getter/setter 同样可被继承或覆盖

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age); // 必须先调用 super
    this.breed = breed;
  }
  speak() {
    console.log(`${this.name} 汪汪叫！`);
  }
  info() {
    console.log(`品种：${this.breed}, 年龄：${this.age}`);
  }
}
<p>const myDog = new Dog('小黑', 2, '拉布拉多');
myDog.speak(); // 小黑 汪汪叫！
myDog.info();  // 品种：拉布拉多, 年龄：2
</p>

静态方法与私有字段（可选增强）

类支持 static 方法（直接通过类名调用，不依赖实例），也支持私有字段（# 开头，仅类内可访问）：

class MathUtils {
  static add(a, b) {
    return a + b;
  }
  #secret = 42;
  getSecret() {
    return this.#secret;
  }
}
<p>MathUtils.add(3, 5); // 8
const utils = new MathUtils();
utils.getSecret(); // 42
// utils.#secret; // 报错：私有字段不可外部访问
</p>

注意原型继承的本质

尽管用了 class，JS 的继承仍是原型链驱动：

• Dog.prototype.__proto__ === Animal.prototype
• myDog instanceof Dog 和 myDog instanceof Animal 都为 true
• 可通过 Object.getPrototypeOf(myDog) 查看原型链

理解这点，有助于调试、实现混合（mixin）或手动修改原型行为。

基本上就这些。class 写法简洁直观，继承逻辑清晰，配合 super 和 extends 就能覆盖绝大多数 OOP 场景。不复杂但容易忽略 super 调用和私有字段的限制。

理论要掌握，实操不能落！以上关于《JavaScript面向对象编程：类与继承详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！