JavaScript类与继承使用教程

文章不知道大家是否熟悉？今天我将给大家介绍《JavaScript类与继承怎么用》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

JavaScript面向对象编程主要依靠class语法（ES6+）和原型继承机制，class是原型操作的语法糖；通过constructor初始化属性，extends实现继承并需调用super，支持静态方法、私有字段（#）及getter/setter。

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学习网公众号也会发布文章相关知识，快来关注吧！