JavaScript(JS) 中实现继承的几种方式

最新推荐文章于 2025-11-26 17:11:00 发布
原创 最新推荐文章于 2025-11-26 17:11:00 发布 · 595 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #JS #继承实现 #JS继承 #原型链继承

本文详细介绍了JavaScript中的六种继承方式：原型链继承、构造继承、实例继承、拷贝继承、组合继承和寄生组合继承，分析了各自的特点、优缺点以及适用场景。

目录

1、原型链继承

2、构造继承

3、实例继承

4、拷贝继承

5、组合继承

6、寄生组合继承

1、原型链继承

将父类的实例作为子类的原型，他的特点是实例是子类的实例也是父类的实例，父类新增的原型方法/属性，子类都能够访问，并且原型链继承简单易于实现，缺点是来自原型对象的所有属性被所有实例共享，无法实现多继承，无法向父类构造函数传参。

2、构造继承

使用父类的构造函数来增强子类实例，即复制父类的实例属性给子类， 构造继承可以向父类传递参数，可以实现多继承，通过 call 多个父类对象。但是构造继承只能继承父类的实例属性和方法，不能继承原型属性和方法，无法实现函数服用，每个子类都有父类实例函数的副本，影响性能。 

3、实例继承

为父类实例添加新特性，作为子类实例返回，实例继承的特点是不限制调用方法，不管是 new 子类（）还是子类（）返回的对象具有相同的效果，缺点是实例是父类的实例，不是子类的实例，不支持多继承 。

4、拷贝继承

特点：支持多继承，缺点：效率较低，内存占用高（因为要拷贝父类的属性）无法获取父类不可枚举的方法（不可枚举方法，不能使用 for in 访问到）。

5、组合继承

通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

6、寄生组合继承

通过寄生方式，砍掉父类的实例属性，这样在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点。

【JavaScript的9种继承实现方式归纳】js实现继承的几种方式.pdf
01-07
JavaScript 的 9 种继承实现方式归纳 JavaScript 中的继承方式是基于原型的，与基于类的编程语言，如 C++ 和 Java，截然不同。JavaScript 的灵活性使得其实现继承的方式非常多样化。本文将介绍 JavaScript 中的 9 ...
Javascript编程中几种继承方式比较分析
10-23
在探讨JavaScript编程中继承方式的比较分析之前，首先需要理解继承的概念及其在面向对象编程中的...通过这些继承方式的比较分析，我们可以更深入地理解JavaScript继承的原理和技巧，进而在开发中做出更合适的设计决策。
JS 中的常用的继承方式有哪些?原型继承、构造继承、实例继承等
频繁记录
06-29 241
JS 中的常用的继承方式有哪些?原型继承、构造继承、实例继承等
在JavaScript中实现继承的几种方式
weixin_44786791的博客
03-05 1470
文章目录前言继承的几种方式构造方式继承进行测试结论修改原型继承进行测试结论（构造函数＋修改原型）组合继承进行测试结论基于组合继承的优化测试结论总结 前言 JavaScript作为一门面向对象语言，自然有封装、继承、多态的特性，在其他面向对象语言中(如Java、python等)，通过类来实现继承，而JavaScript中没有类的概念，于是JavaScript的继承方式区别于传统的继承方式，且有多种实现 继承的几种方式 以下为JavaScript中常见实现继承的方式，不代表全部。 构造方式继承 functi
JavaScript中的几种继承方式及优缺点
幽幽谷
09-06 1142
继承也是前端里面的重要的一个知识点，在实际工作中或者面试中也会经常的遇到，那么通过这篇文章我们详细的了解一下继承的几种方式以及各种继承方式的优缺点！ 在《JavaScript高级程序设计》一书中主要介绍了6种继承方式以及他们的优缺点，这6种分别为原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承以及寄生组合式继承。本文除了介绍这6种继承方式外，还会介绍ES6中的class类继承
JavaScript实现继承的几种方式
叮当的猫猫的博客
09-03 406
js继承
JavaScript实现继承的6种方式
2301_79099606的博客
05-05 473
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
javascript中继承的几种方式
m0_63153901的博客
06-12 4304
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。所谓继承就是通过某种方式让一个对象可以访问到另一个对象中的属性和方法。通过实例化一个函数使子类的原型指向父类的实例，子类就可以调用到父类的属性和方法。代码实现如下： 要注意的问题 1.不要忘记默认的类型： 在js中所有的引用类型都继承了Object，而继承也是通过原型链实现的。所有存在于Object原型对象上的方法同样也存在。比如：hasOwnProperty()、toString(
【JavaScript】继承的实现方式详解
lph159的博客
03-20 1905
继承方式主要特点优点缺点原型链继承让子类prototype指向父类实例方法共享共享引用属性构造函数继承使用call调用父类解决共享问题，可传参方法无法复用组合继承构造函数 + 原型链解决共享问题调用两次父类构造函数寄生组合继承最优 ES5 方案解决所有问题代码略复杂ES6class继承最现代化方案语法简洁，推荐使用仅限 ES6+在现代 JavaScript 开发中，建议优先使用 ES6class继承，但在需要兼容旧浏览器时，可以使用寄生组合继承。
JavaScript中的几种继承方式及优缺点分析
weixin_40381947的博客
04-04 678
JavaScript中的几种继承方式及优缺点分析
JavaScript实现继承的几种方法
太阳与星辰的博客
02-19 570
JavaScript实现继承
详述JavaScript实现继承的几种方式(推荐)
10-22
在JavaScript中，实现继承的几种方式可以带来不同的好处和权衡，主要包括原型链继承、构造函数继承、组合继承以及原型式继承等。 首先，原型链继承是基于原型对象的属性共享机制。每个对象都有一个指向其原型对象的...
Javascript中的几种继承方式对比分析
11-26
最后，**原型式继承**和**ES6的类继承**也是JavaScript中实现继承的常见方式。原型式继承主要使用`Object.create()`，而ES6的类语法提供了更接近传统面向对象语言的语法，但其底层仍然基于原型链。 在选择继承方式...
Vue开发工具使用技巧
2509_93946471的博客
11-24 301
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
【基础】EGG.js 框架内置基础对象
林见鹿鸣
11-24 903
在。
Vue网站
2509_93947362的博客
11-24 182
给大家分享个实用技巧：组件通信时，简单的父子传参用props/$emit搞定，复杂场景就用Vuex，千万别为了省事滥用event bus，不然项目大了事件流会乱成麻花。以前写数据绑定总要搞一堆繁琐的DOM操作，现在一个双大括号{{data}}就能搞定，新手看了五分钟就能上手写页面。刚开始觉得小项目用Vuex太重量级，后来发现即便是最简单的购物车功能，随着业务复杂度的提升，最终还是得引入状态管理。特别是把相同业务逻辑抽离成composable函数后，在不同组件里直接引入就能用，代码复用率明显提升。
vue3 md文件预览和下载
最新发布
zzzz121380的博客
11-26 195
本文介绍了两种在Vue3中预览Markdown文件的方法：使用md-editor-v3插件和@kangc/v-md-editor@next插件，并提供了MD内容下载为MD和PDF文件的实现方案。md-editor-v3方法简单易用，@kangc/v-md-editor支持更多主题选项。MD文件下载可通过Blob对象或downloadjs实现，PDF转换则利用html2pdf.js库将预览内容转为PDF。文章还指出markdown-it插件在表格样式上的不足，不推荐使用。两种方法都提供了完整的代码示例，包括依
React社区
2509_93942966的博客
11-23 286
这种混乱中带着生命力的讨论，特别像早年中关村攒机市场——商家喊着不同配置的优劣，而真正懂行的玩家早就摸清了哪个方案最适合自己的项目。但有意思的是，无论工具链怎么变，React核心团队始终稳如老狗——他们宁可把并发特性在实验阶段晾三年，也不愿重蹈Angular断代升级的覆辙。组件库生态更是百花齐放。这种带着口音的技术交流，反而比标准教科书更能体现社区的活力。或许某天你写在Stack Overflow的答案，就会成为某个巴西程序员解决线上故障的关键——这种跨越时区的知识接力，才是技术社区最浪漫的部分。
JS中继承实现的几种方式
07-08
<think>我们被要求回答JS中继承实现的几种方式，并在最后提出3-5个相关问题。 首先，我们需要列举并解释JavaScript中实现继承的几种主要方式，包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承，以及ES6的class继承。 然后，按照规则，在回答的最后，以“§§相关问题§§”开头，提出3-5个相关问题。 注意：回答必须使用中文，并且相关问题必须基于用户的问题和我们的回答。 下面开始回答：</think>### JavaScript 继承实现方式详解 #### 1. **原型链继承** ```javascript function Parent() { this.name = 'Parent'; } Parent.prototype.say = function() { return this.name; }; function Child() {} Child.prototype = new Parent(); // 核心：继承父类实例 const child = new Child(); console.log(child.say()); // "Parent" ``` **特点**： - 子类共享父类原型方法 - 缺点：所有子类共享父类实例属性（引用类型会互相影响） #### 2. **构造函数继承** ```javascript function Parent(name) { this.name = name; this.colors = ['red', 'blue']; } function Child(name) { Parent.call(this, name); // 核心：复制父类实例属性 } const c1 = new Child('Tom'); c1.colors.push('green'); const c2 = new Child('Jerry'); console.log(c2.colors); // ["red", "blue"] ``` **特点**： - 解决引用属性共享问题 - 缺点：无法继承父类原型方法 #### 3. **组合继承（经典继承）** ```javascript function Parent(name) { this.name = name; } Parent.prototype.say = function() { return this.name; }; function Child(name) { Parent.call(this, name); // 第1次调用Parent } Child.prototype = new Parent(); // 第2次调用Parent Child.prototype.constructor = Child; const child = new Child('Alice'); console.log(child.say()); // "Alice" ``` **特点**： - 结合原型链和构造函数的优点 - 缺点：父类构造函数被调用两次 #### 4. **原型式继承** ```javascript const parent = { name: 'Parent', say() { return this.name; } }; const child = Object.create(parent); // 核心方法 child.name = 'Child'; console.log(child.say()); // "Child" ``` **特点**： - 类似原型链继承的轻量实现 - 适用于简单对象继承 #### 5. **寄生式继承** ```javascript function createChild(original) { const clone = Object.create(original); // 创建新对象 clone.sayHi = function() { // 增强对象 return `Hi, ${this.name}`; }; return clone; } const child = createChild({ name: 'Bob' }); console.log(child.sayHi()); // "Hi, Bob" ``` **特点**： - 工厂函数模式增强对象 - 缺点：方法无法复用 #### 6. **寄生组合式继承（最优解）** ```javascript function inherit(Child, Parent) { const prototype = Object.create(Parent.prototype); // 创建父类原型副本 prototype.constructor = Child; // 修复constructor Child.prototype = prototype; // 指定子类原型 } function Parent(name) { this.name = name; } Parent.prototype.say = function() { return this.name; }; function Child(name) { Parent.call(this, name); } inherit(Child, Parent); // 实现继承 const child = new Child('Eve'); console.log(child.say()); // "Eve" ``` **特点**： - 只调用一次父类构造函数 - 保持原型链完整 - ES5 最完美的继承方案 #### 7. **ES6 Class 继承** ```javascript class Parent { constructor(name) { this.name = name; } say() { return this.name; } } class Child extends Parent { // 核心语法 constructor(name) { super(name); // 必须调用super } } const child = new Child('Grace'); console.log(child.say()); // "Grace" ``` **特点**： - 语法糖（底层基于寄生组合式继承） - 内置super关键字访问父类 - 支持静态方法继承 #### 继承方式对比表 | 继承方式 | 原型方法继承 | 实例属性隔离 | 调用父类次数 | 原型链完整性 | |------------------|--------------|--------------|--------------|--------------| | 原型链继承 | ✅ | ❌ | 1次 | ✅ | | 构造函数继承 | ❌ | ✅ | 多次 | ❌ | | 组合继承 | ✅ | ✅ | 2次 | ✅ | | 寄生组合式继承 | ✅ | ✅ | 1次 | ✅ | | ES6 Class继承 | ✅ | ✅ | 1次 | ✅ | #### 实际应用场景 - **UI组件库开发**：使用ES6 Class实现组件层级继承 - **工具类扩展**：寄生式继承扩展第三方库功能 - **数据模型定义**：组合继承实现模型属性和方法的分离 - **框架核心类**：寄生组合式保持最佳性能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yongqiang Chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值