javascript中如何实现继承(附案例)

在 JavaScript 中,有多种实现继承的方法,最常用的有原型链继承、构造函数继承、组合继承和 class 继承(ES6)。下面以 ES6 的 class 继承为例,展示如何实现继承:

示例:

// 父类
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}// 子类继承父类
class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类构造函数this.breed = breed;}speak() {console.log(`${this.name} barks.`);}
}const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出: Buddy barks.

解释:

  1. Animal 是父类,它有一个构造函数和一个方法 speak()
  2. Dog 是子类,使用了 extends 关键字继承 Animal。子类的构造函数使用 super() 调用了父类的构造函数。
  3. 子类可以继承父类的方法,也可以重写父类方法(如 speak())。

这是 ES6 中推荐的继承方式,简洁且符合面向对象编程的设计。

在 JavaScript 中,实现继承的方式有多种,下面分别给出几种常用继承方式的代码示例。

1. 原型链继承

通过将子类的原型指向父类的实例来实现继承。

// 父类构造函数
function Animal(name) {this.name = name;
}Animal.prototype.speak = function() {console.log(this.name + ' makes a noise.');
};// 子类构造函数
function Dog(name) {this.name = name;
}// 原型链继承
Dog.prototype = new Animal();const dog = new Dog('Buddy');
dog.speak(); // 输出: Buddy makes a noise.

缺点:所有子类实例共享父类实例的属性,如果修改父类引用类型的属性会影响所有子类实例。


2. 构造函数继承

通过在子类构造函数中调用父类构造函数,来避免共享父类的引用属性。

// 父类构造函数
function Animal(name) {this.name = name;
}// 子类构造函数
function Dog(name, breed) {Animal.call(this, name); // 调用父类构造函数this.breed = breed;
}const dog = new Dog('Buddy', 'Golden Retriever');
console.log(dog.name); // 输出: Buddy
console.log(dog.breed); // 输出: Golden Retriever

优点:可以避免原型链继承中的共享引用问题。


3. 组合继承

组合了原型链和构造函数继承的优点,父类的属性通过构造函数继承,方法通过原型链继承。

// 父类构造函数
function Animal(name) {this.name = name;
}Animal.prototype.speak = function() {console.log(this.name + ' makes a noise.');
};// 子类构造函数
function Dog(name, breed) {Animal.call(this, name); // 继承属性this.breed = breed;
}// 继承父类方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出: Buddy makes a noise.

优点:能够避免原型链的引用共享问题,并且继承了父类的属性和方法。


4. ES6 class 继承

使用 class 语法更加简洁,且语义更清晰。

// 父类
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}// 子类
class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类构造函数this.breed = breed;}speak() {console.log(`${this.name} barks.`);}
}const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出: Buddy barks.

优点:语法简洁,且 ES6 class 是语法糖,底层仍是基于原型实现的。


5. 寄生组合式继承

这是组合继承的优化版本,避免了调用两次父类构造函数的问题。

function Animal(name) {this.name = name;
}Animal.prototype.speak = function() {console.log(this.name + ' makes a noise.');
};function Dog(name, breed) {Animal.call(this, name); // 调用父类构造函数,继承属性this.breed = breed;
}// 优化继承
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出: Buddy makes a noise.

优点:避免了调用两次父类构造函数的问题,性能更优。


总结:

  1. 原型链继承:简单但存在引用共享问题。
  2. 构造函数继承:可以避免共享引用类型,但无法继承方法。
  3. 组合继承:结合原型链和构造函数继承的优点,但调用了两次父类构造函数。
  4. ES6 class 继承:语法简洁,是基于原型链的语法糖。
  5. 寄生组合式继承:优化版的组合继承,性能更好。

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

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

相关文章

React响应式数据useState

React响应式数据useState 最近学了React,发现与Vue大有不同,在Vue中实现数据的响应式通过ref()函数,React则是通过useState()函数 使用 语法:const [data, setData] useState(数据) 说明:将数据传给useState()&am…

CANoe_TestModule截图功能TestReportAddWindowCapture

前言 TestReportAddWindowCapture方法作为CAPL脚本中的一个重要功能,其能够将指定窗口的屏幕截图添加到测试报告中,对于记录和验证界面状态具有重要意义。本文将全面解析TestReportAddWindowCapture方法的使用方法、参数解释、示例应用以及注意事项&…

中小企业做网站需要考虑哪些因素?

中小企业在建设网站时,需要考虑的因素有很多。以下是一些主要考虑因素的介绍: 明确建站目的:中小企业需要明确自己建立网站的目的。是为了展示企业形象、推广产品,还是提供客户服务?不同的目的将决定网站的设计和功能…

R语言的下载、安装及环境配置(RstudioVSCode)

0x01 R语言篇 一、软件介绍 R for Windows是一个免费的用于统计计算和统计制图的优秀工具,是R语言开发工具。它拥有数据存储和处理系统、数组运算工具(其向量、矩阵运算方面功能尤其强大)、完整连贯的统计分析工具、优秀的统计制图等功能。…

2.创建第一个MySQL存储过程(2/10)

引言 在现代数据库管理中,存储过程扮演着至关重要的角色。它们是一组为了执行特定任务而编写的SQL语句集合,这些语句被保存在数据库中,并且可以被多次调用执行。存储过程不仅可以提高数据库操作的效率,还能增强数据的安全性和一致…

2-113 基于matlab的图像的配准融合

基于matlab的图像的配准融合,采用互信息配准,PV差值,powell算法,小波变换的图像融合算法。在GUI界面输入两幅图像,完成图像的配准融合。融合图像要求像素 一样。程序代码已经有详细的注释。程序已调通,可直…

多个单链表的合成

建立两个非递减有序单链表,然后合并成一个非递增有序的单链表。 注意:建立非递减有序的单链表,需要采用创建单链表的算法 输入格式: 1 9 5 7 3 0 2 8 4 6 0 输出格式: 9 8 7 6 5 4 3 2 1 输入样例: 在这里给出一组输入。例如&#xf…

鸿蒙harmonyos next纯flutter开发环境搭建

公司app是用纯flutter开发的,目前支持android和iOS,后续估计也会支持鸿蒙harmonyos。目前谷歌flutter并没有支持咱们国产手机操作系统鸿蒙harmonyos,于是乎国内有个叫OpenHarmony-SIG的组织,去做了鸿蒙harmonyos适配flutter开发的…

ROS无人机机械爪使用

引言:使用飞控的主通道5-8作为舵机控制输出,需要提前设置好飞控参数,否则无效。本节资料文件尚未整理完毕,整理完毕后会在B站进行视频讲解,并进行开源 1、启动mavros通信,用于订阅遥控器的按键信息&#x…

harbor https配置

安装docker compose curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum -y install docker-compose docker-compose version生成自建CA证书 生成CA私钥: openssl genrsa -out /path/ca/ca.key 4096生成ca的自签名证书: open…

【力扣 | SQL题 | 每日四题】力扣1783,1757,1747,1623,1468,1661

昨天晚上睡着了,今天把昨天的每日一题给补上。 1. 力扣1783:大满贯数量 1.1 题目: 表:Players ------------------------- | Column Name | Type | ------------------------- | player_id | int | | player_na…

【AI知识点】词嵌入(Word Embedding)

词嵌入(Word Embedding)是自然语言处理(NLP)中的一种技术,用于将词语或短语映射为具有固定维度的实数向量。这些向量(嵌入向量)能够捕捉词语之间的语义相似性,即将语义相近的词映射到…

oracle 新建用户,用户插入数据报错:ORA-01950: 对表空间 ‘USERS‘ 无权限

oracle 新建用户,用户插入数据报错:ORA-01950: 对表空间 ‘USERS’ 无权限 根据业务需求创建了一个新的表空间和一个新的用户,当用这个新用户创建表时,报错:ORA-01950: 表空 间’USERS’中无权限。我已经把创建表的权限赋给了此用…

使用SpringBoot自定义注解+拦截器+token机制,实现接口的幂等性

1 整合springboot和redis环境的集成2 配置请求的方法体和枚举类 import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;Data AllArgsConstructor NoArgsConstructor public class Response {private int status;private String msg;privat…

LeetCode hot100---链表专题(C++语言)

1、相交链表 (1)题目描述以及输入输出 (1)题目描述: 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交点,返回 null 。 (2)输入输出描述: 输入:…

【游戏模组】重返德军总部2009高清重置MOD,建模和材质全部重置,并且支持光追效果,游戏画质大提升

各位好,今天小编给大家带来一款新的高清重置MOD,本次高清重置的游戏叫《重返德军总部2009》2009年发布,我相信很多玩家已经玩过了,如果你还没有玩过我也可以和你简单介绍一下剧情,这款游戏故事背景接续在《重返德军总部…

【Python】Dejavu:Python 音频指纹识别库详解

Dejavu 是一个基于 Python 实现的开源音频指纹识别库,主要用于音频文件的识别和匹配。它通过生成音频文件的唯一“指纹”并将其存储在数据库中,来实现音频的快速匹配。Dejavu 的主要应用场景包括识别音乐、歌曲匹配、版权管理等。 ⭕️宇宙起点 &#x1…

golang web笔记-3.响应ResponseWriter

简介 从服务器向客户端返回响应需要使用 ResponseWriter,ResponseWriter是一个接口,handler用它来返回响应。 ResponseWriter常用方法 Write:接收一个byte切片作为参数,然后把它写入到响应的body中。如果Write被调用时&a…

828华为云征文|部署在线论坛网站 Flarum

828华为云征文|部署在线论坛网站 Flarum 一、Flexus云服务器X实例介绍二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置2.4 Docker 环境搭建 三、Flexus云服务器X实例部署 Flarum3.1 Flarum 介绍3.2 Flarum 部署3.3 Flarum 使用 四、总结 一、…

【GeekBand】C++设计模式笔记5_Observer_观察者模式

1. “组件协作”模式 现代软件专业分工之后的第一个结果是“框架与应用程序的划分”,“组件协作”模式通过晚期绑定,来实现框架与应用程序之间的松耦合,是二者之间协作时常用的模式。典型模式 Template MethodStrategyObserver / Event 2.…