JavaScript 六种常见的 继承方法

继承是面向对象编程中的一个重要概念,它允许一个对象(子类或派生类)获取另一个对象(父类或基类)的属性和方法。在 JavaScript 中,有多种方式可以实现继承。以下是六种常见的 JavaScript 继承方法以及详细介绍:

原型链继承(Prototype Inheritance):

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

js 复制代码
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):

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

js 复制代码
function Parent() {
this.name = 'Parent';
}

function Child() {
Parent.call(this);
this.name = 'Child';
}

const child = new Child();
console.log(child.name); // 输出 "Child"
组合继承(Combination Inheritance):

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

js 复制代码
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):

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

js 复制代码
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):

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

js 复制代码
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 关键字实现类的继承,子类可以继承父类的属性和方法。

js 复制代码
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"

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

相关推荐
2501_944448002 分钟前
Flutter for OpenHarmony衣橱管家App实战:预算管理实现
前端·javascript·flutter
2501_944448006 分钟前
Flutter for OpenHarmony衣橱管家App实战:意见反馈功能实现
android·javascript·flutter
笨蛋不要掉眼泪8 分钟前
Redis持久化解析:RDB和AOF的对比
前端·javascript·redis
心.c11 分钟前
Vue3+Node.js实现文件上传分片上传和断点续传【详细教程】
前端·javascript·vue.js·算法·node.js·哈希算法
妙团团12 分钟前
React学习之自定义tab组合组件
javascript·学习·react.js
2601_9498095918 分钟前
flutter_for_openharmony家庭相册app实战+隐私设置实现
android·javascript·flutter
2601_9495936520 分钟前
React Native 鸿蒙跨平台开发:LinearGradient 渐变动画效果
javascript·react native·react.js
qq_1777673722 分钟前
React Native鸿蒙跨平台音乐播放器涉及实时进度更新、播放控制、列表交互、状态管理等核心技术点
javascript·react native·react.js·ecmascript·交互·harmonyos
2501_9209317026 分钟前
React Native鸿蒙跨平台实现了简单的商品图片轮播功能,为用户提供了直观的商品图片浏览体验,帮助用户全面了解商品外观
javascript·react native·react.js·ecmascript·harmonyos
切糕师学AI37 分钟前
Vue 中如何修改地址栏参数并重新加载?
前端·javascript·vue.js