面向对象编程:JS类与继承全解析
时间:2025-12-27 21:56:50 167浏览 收藏
本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的,希望这篇《面向对象编程:JavaScript类与继承详解》对你有很大帮助!欢迎收藏,分享给更多的需要的朋友学习~
JavaScript中的class是基于原型的语法糖,通过class定义类并用constructor初始化实例,方法挂载于原型;使用extends实现继承,子类需调用super()初始化父类,支持方法重写;static定义静态方法供类直接调用;#开头的私有字段限制外部访问,提升封装性。

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学习网公众号吧!
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
104 收藏
-
120 收藏
-
344 收藏
-
165 收藏
-
369 收藏
-
190 收藏
-
433 收藏
-
163 收藏
-
174 收藏
-
107 收藏
-
320 收藏
-
250 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习