当前位置：首页 > 文章列表 > 文章 > 前端 > 面向对象编程：JS类与继承全解析

面向对象编程：JS类与继承全解析

2025-12-27 21:56:50 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《面向对象编程：JavaScript类与继承详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

JavaScript中的class是基于原型的语法糖，通过class定义类并用constructor初始化实例，方法挂载于原型；使用extends实现继承，子类需调用super()初始化父类，支持方法重写；static定义静态方法供类直接调用；#开头的私有字段限制外部访问，提升封装性。

面向对象编程_javascript类与继承

JavaScript 中的面向对象编程（OOP）基于原型（prototype），但 ES6 引入了 class 语法，让开发者可以用更清晰、更接近传统语言的方式来创建对象和实现继承。虽然 class 在 JavaScript 中是“语法糖”，其底层仍是基于原型机制，但使用它可以让代码结构更清晰、更易维护。

JavaScript 类的基本语法

使用 class 关键字可以定义一个类。类中通常包含一个 constructor 方法用于初始化实例属性，以及其它方法定义对象行为。

示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
<p>sayHello() {
console.log(<code>你好，我是${this.name}，今年${this.age}岁。</code>);
}
}</p><p>const p1 = new Person("小明", 25);
p1.sayHello(); // 输出：你好，我是小明，今年25岁。
</p>

在这个例子中，Person 是一个类，constructor 构造函数在使用 new 创建实例时自动调用，sayHello 是原型上的方法，所有实例共享。

类的继承：extends 与 super

JavaScript 支持通过 extends 实现类的继承，子类可以继承父类的属性和方法。在子类构造函数中，必须先调用 super() 来调用父类的构造函数。

示例：

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类构造函数
    this.grade = grade;
  }
<p>study() {
console.log(<code>${this.name} 正在学习，年级是 ${this.grade}。</code>);
}</p><p>// 可以重写父类方法
sayHello() {
console.log(<code>我是学生 ${this.name}，今年${this.age}岁，读 ${this.grade} 年级。</code>);
}
}</p><p>const s1 = new Student("小红", 20, "大三");
s1.sayHello(); // 覆盖后的方法
s1.study();    // 子类特有方法
</p>

这里 Student 继承了 Person 的所有功能，并扩展了自己的属性和方法。通过 super() 确保父类正确初始化，这是子类构造函数中的必要步骤。

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

类中还可以定义静态方法，它们属于类本身而不是实例，通过 static 关键字声明。

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}
<p>console.log(MathUtils.add(3, 5)); // 8
</p>

静态方法常用于工具函数或不需要实例化的操作。

现代 JavaScript 还支持私有字段（以 # 开头），限制外部访问：

class BankAccount {
  #balance = 0;
<p>deposit(amount) {
this.#balance += amount;
}</p><p>getBalance() {
return this.#balance;
}
}</p><p>const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance()); // 100
// account.#balance; // 错误：无法访问私有字段
</p>

总结

JavaScript 的 class 提供了一种更直观的方式来组织面向对象的代码。通过 class 定义模板，用 extends 实现继承，配合 super 调用父类逻辑，再加上静态方法和私有字段的支持，使得 JS 的 OOP 更加完整和安全。尽管底层仍是原型链，但 class 让开发体验更接近传统面向对象语言。

基本上就这些，掌握好类与继承，能让你写出结构清晰、易于扩展的 JavaScript 应用。不复杂但容易忽略的是 super 的调用时机和私有字段的命名规则。

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

面向对象编程