JavaScript六种常见的继承方法分享

更新时间：2023年09月19日 10:31:26 作者：筱小琦

继承是面向对象编程中的一个重要概念,它允许一个对象（子类或派生类）获取另一个对象（父类或基类）的属性和方法,在 JavaScript 中,有多种方式可以实现继承,本文将给大家介绍六种常见的JavaScript继承方法,需要的朋友可以参考下

原型链继承（Prototype Inheritance）：

这是 JavaScript 中最基本的继承方式。它通过将子类的原型对象指向父类的实例来实现继承。这意味着子类继承了父类的属性和方法，但也可能会有一些潜在的问题，比如所有子类的实例共享父类属性，导致意外的行为。

function Parent() {
  this.name = 'Parent'
}
Parent.prototype.sayHello = function () {
  console.log(`Hello, I'm ${this.name}`)
}
function Child() {
  this.name = 'Child'
}
Child.prototype = new Parent()
const child = new Child()
child.sayHello() // 输出 "Hello, I'm Child"

构造函数继承（Constructor Inheritance）：

这种继承方式通过在子类构造函数中调用父类构造函数来实现。这样可以避免原型链继承中的共享属性问题，但父类的方法不会被继承到子类的原型中。

function Parent() {
this.name = 'Parent';
}
function Child() {
Parent.call(this);
this.name = 'Child';
}
const child = new Child();
console.log(child.name); // 输出 "Child"

组合继承（Combination Inheritance）：

这是将原型链继承和构造函数继承结合的一种方式。它使用原型链继承来继承方法，使用构造函数继承来继承属性。但这种方法会调用两次父类构造函数，可能会导致性能问题。

function Parent() {
this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
}
function Child() {
Parent.call(this);
this.name = 'Child';
}
Child.prototype = new Parent();
const child = new Child();
child.sayHello(); // 输出 "Hello, I'm Child"

原型式继承（Prototype-based Inheritance）：

这种继承方式使用一个已有的对象作为模板来创建新对象，新对象可以继承模板对象的属性和方法。但需要注意的是，修改子对象的属性也会影响到模板对象。

const parent = {
name: 'Parent',
sayHello: function() {
console.log(`Hello, I'm ${this.name}`);
}
};
const child = Object.create(parent);
child.name = 'Child';
child.sayHello(); // 输出 "Hello, I'm Child"
```js

寄生式继承（Parasitic Inheritance）：

这种方式类似于原型式继承，但在创建新对象时可以添加额外的属性和方法，这些额外的属性和方法可以根据需要进行定制。

function createChild(parent) {
const child = Object.create(parent);
child.name = 'Child';
child.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
return child;
}
const parent = {
name: 'Parent'
};
const child = createChild(parent);
child.sayHello(); // 输出 "Hello, I'm Child"

ES6 类继承（Class Inheritance）：

ES6 引入了 class 关键字，使面向对象编程更加简洁。可以使用 extends 关键字实现类的继承，子类可以继承父类的属性和方法。

class Parent {
constructor() {
this.name = 'Parent';
}
sayHello() {
console.log(`Hello, I'm ${this.name}`);
}
}
class Child extends Parent {
constructor() {
super();
this.name = 'Child';
}
}
const child = new Child();
child.sayHello(); // 输出 "Hello, I'm Child"

学习这些继承模式的关键在于理解它们的核心概念，否则当你在编写代码时遇到书本上的示例时，可能会感到为什么不直接采用更简单的继承方式呢？以原型式继承为例，它通过复制内部对象的一个副本来实现继承。这种方式不仅可以继承内部对象的属性，还能够自由调用其中包含的函数、对象，以及从源内部对象返回的内容。你可以添加属性，修改参数，从而定制化原型对象，而这些新增的属性不会相互影响。

以上就是JavaScript六种常见的继承方法分享的详细内容，更多关于JavaScript继承方法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScript Window浏览器对象模型原理解析
这篇文章主要介绍了JavaScript Window浏览器对象模型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
JavaScript调试工具汇总
这篇文章主要介绍了7款基于桌面和WEB的JavaScript调试工具，更有效地处理动态类型使应用程序更符合编码标准，不管你是新学习javascript的菜鸟还是业界大神，都非常的有用。
2014-12-12
javascript 一段左右两边随屏滚动的代码
在不少的网站使用了这种技术，一般就是两边的一些三个小块排一起的广告。
2009-06-06
纯JS实现旋转图片3D展示效果
本文给大家分享的是纯js实现的类似flash里的图片环绕旋转效果，非常炫酷，有需要的小伙伴可以参考下。
2015-04-04
子窗口、父窗口和Silverlight之间的相互调用
前两天做 silverlight 的东西，主页面打开一个子页面，然后子页面中包含一个 silverlight 应用程序那难免会涉及到他们三者相互调用的问题
2010-08-08
利用three.js画一个3D立体的正方体示例代码
Three.js是一个3DJavaScript库，基于右手坐标系，可以创建简单或是比较复杂的三维图形并应用丰富多彩的纹理和材质，可以添加五光十色的光源，可以在3D场景中移动物体或是添加脚本动画等等。本文介绍了利用three.js如何画一个3D立体的正方体的方法，需要的可以参考下。
2017-11-11
layer.open提交子页面的form和layedit文本编辑内容的方法
今天小编就为大家分享一篇layer.open提交子页面的form和layedit文本编辑内容的方法，具有好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript使用享元模式实现文件上传优化操作示例
这篇文章主要介绍了JavaScript使用享元模式实现文件上传优化操作,结合实例形式分析了javascript基于享元模式进行文件上传优化操作的原理、步骤及相关使用技巧,需要的朋友可以参考下
2018-08-08
js模拟3D场景效果代码打包
这几个demo上星期平安夜做的，感觉效果不错，就放在出来，分享给大家
2012-01-01
分析uniapp入门之nvue爬坑记
uni-app的nvue说白了就是weex的那一套东西，uni-app集成了weex的 SDK，也就实现了App端的原生渲染能力。本文将介绍uniapp遇到的一些坑，分享给大家。
2021-06-06