当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript类与继承使用教程

JavaScript类与继承使用教程

2025-12-18 21:11:32 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

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

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

javascript如何实现面向对象编程_类和继承如何使用

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>