JavaScript中的继承方式详解

Question JavaScript实现继承的方式?

包含原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承和ES6 类继承

JavaScript实现继承的方式

在JavaScript中,实现继承的方式多种多样,每种方式都有其优势和适用场景。以下是一些常见的继承方式:

1. 原型链继承

原型链继承是通过将子类的原型设置为父类的实例来实现继承。这样,子类就可以访问父类原型上的属性和方法。

function Parent({
  this.name = 'Parent';
}

function Child({}

Child.prototype = new Parent();

const childInstance = new Child();
console.log(childInstance.name); // 输出 'Parent'

优势: 简单易懂。

缺点: 引用类型的属性会被所有实例共享,无法传递参数给父类构造函数。

2. 构造函数继承

构造函数继承通过在子类构造函数中调用父类构造函数来实现继承。

function Parent(name{
  this.name = name || 'Parent';
}

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

const childInstance = new Child('Child');
console.log(childInstance.name); // 输出 'Child'

优势: 解决了原型链继承中引用类型属性共享的问题。

缺点: 方法都在构造函数中定义,无法实现函数复用。

3. 组合继承

组合继承结合了原型链继承和构造函数继承,通过调用父类构造函数设置实例属性,再通过将父类实例作为子类原型来实现。

function Parent(name{
  this.name = name || 'Parent';
}

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

Child.prototype = new Parent();

const childInstance = new Child('Child');
console.log(childInstance.name); // 输出 'Child'

优势: 同时继承实例属性和方法。

缺点: 调用了两次父类构造函数,存在一定的性能问题。

4. 原型式继承

原型式继承通过创建一个空对象,然后将该对象作为参数传递给一个函数,该函数的原型被赋值为这个对象,从而实现继承。

function createObject(obj{
  function F({}
  F.prototype = obj;
  return new F();
}

const parent = {
  name'Parent'
};

const child = createObject(parent);
console.log(child.name); // 输出 'Parent'

优势: 简单灵活。

缺点: 属性共享问题,引用类型属性会被所有实例共享。

5. 寄生式继承

寄生式继承在原型式继承的基础上,增加了对父类构造函数的调用,从而可以传递参数给父类构造函数。

function createObject(obj{
  const clone = Object.create(obj);
  clone.sayHello = function({
    console.log('Hello!');
  };
  return clone;
}

const parent = {
  name'Parent'
};

const child = createObject(parent);
console.log(child.name); // 输出 'Parent'
child.sayHello(); // 输出 'Hello!'

优势: 可以在对象上添加新的方法。

缺点: 仍然存在属性共享问题。

6. 寄生组合式继承

寄生组合式继承是为了解决组合继承中调用两次父类构造函数的性能问题,通过使用 Object.create 创建父类原型的副本,然后将该副本赋值给子类原型。

function inheritPrototype(child, parent{
  const prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Parent(name{
  this.name = name || 'Parent';
}

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

inheritPrototype(Child, Parent);

const childInstance = new Child('Child');
console.log(childInstance.name); // 输出 'Child'

优势: 解决了组合继承的性能问题,同时保持了原型链继承的优点。

缺点: 略显繁琐。

7. ES6 类继承

ES6 引入了 class 关键字,使得面向对象编程更加直观。通过 extends 关键字可以实现类的继承。

class Parent {
  constructor(name) {
    this.name = name || 'Parent';
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }
}

const childInstance = new Child('Child');
console.log(childInstance.name); // 输出 'Child'

优势: 语法更加简洁,易读易写。

缺点: 底层仍然是基于原型链的继承。

100+小程序源码关注公众号回复 5 获取(不想看激励视频的可私信)

alt

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/775785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

macOS Sonoma 14.4.1 (23E224) 正式版 Boot ISO 原版可引导镜像下载

macOS Sonoma 14.4.1 (23E224) 正式版 Boot ISO 原版可引导镜像下载 2024 年 3 月 26 日凌晨,macOS Sonoma 14.4.1 更新修复了一个可能导致连接到外部显示器的 USB 集线器无法被识别的问题。它还解决了可能导致 Java 应用程序意外退出的问题,并修复了可…

Spring 事务传播行为

实现原理 : Aop (TransactionInterceptor) 实现 使用spring声明式事务注意事项 同一个bean中的方法调用必须重新声明一个bean调用、否则后续方法调用的事务默认使用第一个第二个不生效 package com.cloud.person.service.impl;import com.cloud.person.dao.S1Mapper; import…

STM32常用的开发工具有哪些

大家好,今天给大家介绍STM32常用的开发工具有哪些,文章末尾附有分享大家一个资料包,差不多150多G。里面学习内容、面经、项目都比较新也比较全!可进群免费领取。 STM32常用的开发工具主要包括以下几类: 集成开发环境&…

vue.js 开发如何应用“软件工程“的原则?

在使用Vue.js进行开发时,将软件工程的原则和最佳实践应用到项目中,可以帮助提高项目的质量、维护性和团队的协作效率。以下是一些具体的建议: 1. 项目结构和模块化 合理组织项目结构:按功能或特性将代码组织成模块,使…

java数据结构与算法刷题-----LeetCode744. 寻找比目标字母大的最小字母

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 二分查找 二分查找 解题思路:时间复杂度O( l o g 2 …

说说webpack proxy工作原理?为什么能解决跨域?

文章目录 一、是什么二、工作原理三、跨域参考文献 一、是什么 webpack proxy,即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制) 想要…

电路仿真软件大比拼:哪款更适合你?

以下是关于市面上常见的四款电路仿真软件的整体介绍: 1. Multisim(美国,美国国家仪器(NI)有限公司) 特点与优势: 直观的图形界面:提供用户友好的界面,便于快速搭建和修…

机器学习的分类——无监督学习(Unsupervised Learning)

无监督学习(Unsupervised Learning)是机器学习中的一种重要分类,它与监督学习的主要区别在于训练数据没有标签。无监督学习的目的是探索数据本身的结构和模式,而不是预测或分类具体的输出。这种学习方式对于发现数据中的隐藏模式和…

Openstack创建和操作实例,实现与外部网络通信

一、熟悉OpenStack图形界面操作 1、了解Horizon项目 Horizon项目 各OpenStack服务的图形界面都是由Horizon提供的。Horizon提供基于Web的模块化用户界面。Horizon为云管理员提供一个整体的视图。Horizon为终端用户提供一个自主服务的门户。Horizon由云管理员进行管理与控制&a…

SQL函数操作——3、数据统计综合应用

任务描述 本关任务: 灵活使用分组操作和聚集函数解决比较复杂的数据统计问题 本关使用的关系说明: product(maker,model,type) maker:表示生产厂商 model:生产的产品型号 type:产品类型,有pc laptop两种 pc(model…

面试题解析:bind,call,apply的区别(2)

在面试的过程中,面试官很有可能会问到我们有关this的相关内容。那么关于this我们都知道在 JavaScript 中,this 是一个特殊关键字,它指向当前函数执行时的上下文对象。 this 的值取决于函数被调用的方式: 全局上下文中的 this: 当…

语音陪玩交友软件系统程序-app小程序H5三端源码交付,支持二开!

电竞行业的发展带动其周边产业的发展,绘制着游戏人物图画的抱枕、鼠标垫、海报销量极大,电竞游戏直播、游戏教程短视频也备受人们喜爱,自然,像游戏陪练、代练行业也随之生长起来,本文就来讲讲,从软件开发角…

【字节二面】SpringBoot可以同时处理多少请求

目录 一、示例代码二、那么springboot可以处理多少请求?三、maxConnections、maxThreads、acceptCount的关系 一、示例代码 RestController Slf4j public class RequestController {GetMapping("/test")public String test(HttpServletRequest request) …

mysql_数据_增删改查

DML(数据操作语言) 添加数据 指定字段:INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); 全部字段:INSERT INTO 表名 VALUES (值1, 值2, ...); 批量添加数据:INSERT INTO 表名 (字段名1, 字段名2…

vscode ai插件“通义灵码”

文章目录 vscode ai插件“通义灵码”为什么安装?官网主要功能 vscode ai插件“通义灵码” 为什么安装? 通义灵码,是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成…

腾讯放大招了!AniPortrait开源上线!音频驱动逼真人像动画合成!人人都是歌手!

文章链接:https://arxiv.org/pdf/2403.17694 github链接:https://github.com/Zejun-Yang/AniPortrait 本文提出了AniPortrait,一个新颖的框架,用于生成由音频和参考肖像驱动的高质量动画。方法分为两个阶段。首先,从音…

linux i2c-tools使用总结

1,安装iic-tools sudo apt install i2c-tools -y 2,查看有几条iic总线 [root@sino-platform:/root]# ls /dev/i2c- i2c-0 i2c-1 i2c-2 i2c-3 3,查看i2c命令 [root@sino-platform:/root]# i2c i2cdetect i2cdump i2cget i2cset 4,iic-help命令 [root@sino-platform…

P1093 [NOIP2007 普及组] 奖学金 Python 列表中的字典元素

[NOIP2007 普及组] 奖学金 题目背景 NOIP2007 普及组 T1 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前 5 5 5 名学生发奖学金。期末,每个学生都有 3 3 3 门课的成绩:语文、数学、英语。先按总分从高到低排…

【vue3学习笔记(二)】(第141-143节)初识setup;ref函数_处理基本类型;ref函数_处理对象类型

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 本篇内容对应课程第141-143节 课程 P141节 《初识setup》笔记 1、setup是所有组合式API“表演的舞台”,组件中所用到的所有数据、方法、监视数据、生命周期钩子等都需要配置在setup中。 2、setup的两种返回值&…

深入解析Oracle数据库ORA-01427错误:单行子查询返回多行的问题与解决办法

深入解析Oracle数据库ORA-01427错误:单行子查询返回多行的问题与解决办法 1、引言2、错误描述3、常见场景与示例4、解决方案5、声明 1、引言 在Oracle数据库日常运维与开发过程中,经常会遇到ORA-01427错误,这是一个很典型的数据库错误提示&am…