JS对象继承方式全解析
时间:2025-08-01 10:01:43 364浏览 收藏
来到golang学习网的大家,相信都是编程学习爱好者,希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JS对象继承方法详解》,介绍一下,希望对大家的知识积累有所帮助,助力实战开发!
在JavaScript中,让一个对象继承另一个对象的核心方法是建立原型链关系,最推荐的方式是使用Object.create()。1. 使用Object.create()可直接指定新对象的原型,实现纯净的原型继承,如const student = Object.create(person),使student通过[[Prototype]]链访问person的属性和方法;2. ES6的class语法糖通过extends实现继承,本质仍是原型链,如class Dog extends Animal,并需在子类constructor中调用super()以正确初始化父类;3. 继承中的常见问题包括原型上引用类型属性被所有实例共享导致的数据污染,解决方法是在构造函数中初始化引用属性;4. this上下文丢失问题常出现在方法作为回调或解构调用时,需通过bind、箭头函数等方式绑定this;5. 原型链性能通常不是瓶颈,现代引擎对属性查找和内存使用有高度优化,深层原型链在实际中罕见且影响微小,而共享原型方法节省内存,提升效率。因此,JavaScript继承应优先考虑代码清晰与可维护性,合理选择Object.create()或class语法,同时规避引用共享和this指向问题,最终实现高效、安全的对象继承。
在JavaScript里,让一个对象继承另一个对象,说白了,就是建立一种原型链关系。最直接、也最推荐的方式是利用 Object.create()
,它能为你创建一个新对象,并指定它的原型是谁。当然,现代JS里我们更多会用到 class
语法糖,它背后也是原型继承的逻辑。

解决方案
要让一个对象继承另一个对象,最纯粹、最能体现JavaScript原型本质的方法就是 Object.create()
。它接收两个参数:第一个是你希望新对象的原型是谁,第二个是可选的,用于定义新对象自身的属性。
比如,我们有一个 person
对象:

const person = { name: '张三', age: 30, greet() { console.log(`你好,我是 ${this.name}。`); } };
现在我想创建一个 student
对象,它应该拥有 person
的所有特性,同时还有自己独有的属性,比如 studentId
。我就可以这样做:
const student = Object.create(person); student.name = '李四'; // 覆盖父级属性 student.studentId = 'S12345'; student.study = function() { console.log(`${this.name} 正在努力学习,学号是 ${this.studentId}。`); }; student.greet(); // 输出:你好,我是 李四。 student.study(); // 输出:李四 正在努力学习,学号是 S12345。 console.log(student.age); // 输出:30 (从person继承而来)
这里 student
对象并没有直接复制 person
的属性,而是通过 Object.create(person)
让 student
的 [[Prototype]]
指向了 person
。当访问 student.age
时,如果 student
自身没有这个属性,JavaScript就会沿着原型链向上查找,直到在 person
上找到它。这种方式非常清晰地表达了“基于现有对象创建新对象”的意图,避免了传统构造函数模式中可能出现的 new
关键字带来的理解偏差,因为它不涉及构造函数调用,就是纯粹的原型链接。

为什么说原型链是JavaScript继承的基石?
我觉得,理解JavaScript的继承,核心就在于理解原型链。它不像Java或C++那样有类和严格的继承层级,JS更像是搭积木,每个对象都有一个内部的 [[Prototype]]
属性(在旧浏览器中通常可以通过 __proto__
访问,但这不是标准用法,不建议直接操作),这个属性指向它的“父”对象。当你想访问一个对象的某个属性或方法时,如果它自己没有,JS引擎就会沿着这个 [[Prototype]]
链向上找,直到找到或者到达原型链的顶端(null
)。
这就像一个家族谱系,你问小明他有没有某个技能,他自己没有,就会问他爸爸,爸爸没有就问爷爷,直到家族里某个长辈有这个技能为止。如果都没人有,那就算了,就是 undefined
。这种机制让JavaScript的继承非常灵活,你可以在运行时动态地修改对象的原型,甚至在原型上添加或删除属性和方法,这些改变会立即影响到所有继承自该原型的对象。这也就解释了为什么 Object.create()
如此重要,因为它就是直接操纵这个 [[Prototype]]
链接的工具。它赋予了JS一种非常独特的、基于对象的继承方式,而不是基于类的。
class
语法糖下的继承:更现代的写法有哪些考量?
随着ES6的到来,JavaScript引入了 class
关键字,这让很多从传统面向对象语言背景转过来的人感到亲切。它看起来确实很像Java或C++中的类,有 constructor
,有 extends
,有 super
。但实际上,这只是一个语法糖,它背后依然是原型链那一套。
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} 发出了声音。`); } } class Dog extends Animal { constructor(name, breed) { super(name); // 调用父类的构造函数 this.breed = breed; } bark() { console.log(`${this.name} (一只${this.breed}) 汪汪叫!`); } } const myDog = new Dog('旺财', '金毛'); myDog.speak(); // 输出:旺财 发出了声音。 myDog.bark(); // 输出:旺财 (一只金毛) 汪汪叫!
使用 class
的好处显而易见:代码可读性更高,结构更清晰,更符合传统面向对象的思维习惯。extends
关键字直接声明了继承关系,super()
则解决了子类构造函数中调用父类构造函数的问题,确保了父类属性的正确初始化。
不过,这里面也有一些需要注意的地方。比如,在子类的 constructor
中,你必须在访问 this
之前调用 super()
。这是因为 super()
实际上负责了 this
对象的创建和初始化,如果你不先调用它,this
就不会被正确绑定。另外,尽管 class
看起来是“类”,但它本质上还是函数,typeof Animal
依然是 "function"
。所以,别被表象迷惑,它只是把原型链的复杂操作封装起来,提供了一个更现代、更易读的接口。对我个人而言,日常开发中我肯定更偏爱 class
,因为它大大提升了团队协作时的代码理解效率,降低了心智负担。
继承中常见的“坑”和性能思考
在JavaScript的继承实践中,确实有一些常见的“坑”和一些性能上的考量,我觉得这些是每个开发者都应该有点概念的。
一个经典的“坑”就是原型上引用类型属性的共享问题。如果你在原型上定义了一个数组或对象,比如:
function Parent() {} Parent.prototype.colors = ['red', 'blue']; const child1 = new Parent(); const child2 = new Parent(); child1.colors.push('green'); console.log(child2.colors); // 输出:['red', 'blue', 'green']
看到没?child1
修改了 colors
,child2
也跟着变了。这是因为 colors
数组是所有实例共享的同一个引用。解决办法通常是在构造函数内部初始化这些引用类型属性,让每个实例都有自己独立的副本。
另一个是关于this
上下文的丢失。当你在类或原型上定义一个方法,然后把它作为回调函数传递出去,或者从对象中解构出来单独调用时,this
的指向可能会变得不确定,不再指向原来的实例。这通常需要使用 bind()
方法、箭头函数或者在调用时确保 this
的正确绑定。
至于性能,通常情况下,JavaScript引擎(比如V8)对原型链的查找做了大量优化,所以原型链的深度对性能的影响在大多数应用中可以忽略不计。除非你的原型链非常非常深(比如几十层甚至上百层,这在实际开发中几乎不会出现),否则无需过度担心查找性能。相反,原型继承在内存使用上是很有优势的,因为方法和共享属性只存储一份在原型上,所有实例共享它们,这比每个实例都复制一份要节省大量内存。现代JS引擎还会对那些具有相同原型和属性结构的对象进行优化,这被称为“隐藏类”或“形状”,可以进一步提升属性访问的效率。所以,与其担心原型链的性能,不如更关注代码的结构清晰度和可维护性。
好了,本文到此结束,带大家了解了《JS对象继承方式全解析》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多文章知识!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
134 收藏
-
156 收藏
-
490 收藏
-
210 收藏
-
142 收藏
-
280 收藏
-
428 收藏
-
344 收藏
-
113 收藏
-
303 收藏
-
204 收藏
-
178 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习