JavaScript继承 寄生组合式继承 extends

JavaScript继承

1、JS 的继承到底有多少种实现方式呢?
2、ES6 的 extends 关键字是用哪种继承方式实现的呢?
在这里插入图片描述

继承种类

原型链继承

function Parent1() {this.name = 'parentl'this.play = [1, 2, 3]
}function Child1() {this.type = 'child2'
}Child1.prototype = new Parent1();
console.log(new Child1());let child1 = new Child1();
child1.play.push(4)
let child2 = new Child1();
console.log(child1.play,child2.play)

输出:

Parent1 { type: 'child2' }   
[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]

特点
父类内存空间是共享的,当一个发生变化的时候,另外一个也随之进行了变化。

构造函数继承(借助 call)

function Parent1() {this.name = 'parent'
}Parent1.prototype.getName = function () {return this.name;
}function Child1() {Parent1.call(this);this.type = 'child1'
}let child = new Child1();
console.log(child);
console.log(child.getName())

输出

Child1 { name: 'parent', type: 'child1' }
C:\Users\liyd\WebstormProjects\test\dataConvert.js:16                                  
console.log(child.getName())                                                           ^                                                                    TypeError: child.getName is not a function    

缺点:
只能继承父类的实例属性和方法。不能继承原型属性和方法。

组合继承方式(推荐)

function Parent3() {this.name = 'parent3'this.play =[1,2,3]
}Parent3.prototype.getName = function () {return this.name;
}function Child3() {Parent3.call(this);this.type = 'child6'
}
// 第一次调用Parent3
Child3.prototype = new Parent3()
// 手动挂上构造器,指向自己的构造函数
Child3.prototype.constructor = Child3var child3 = new Child3();
var child4 = new Child3();
child3.play.push(4)
console.log(child3.play,child4.play)
console.log(child3.getName())
console.log(child4.getName())

输出:

[ 1, 2, 3, 4 ] [ 1, 2, 3 ]
parent3                   
parent3   

原型式继承

let parent4 = {name:"parent4",friends:["p1","p2","p3"],getName:function () {return this.name}
}let person4 = Object.create(parent4)
person4.name = "tom"
person4.friends.push("无始")let person5 = Object.create(parent4);
person5.friends.push("狂蟒")console.log(person4.name)
console.log(person4.name === person4.getName())
console.log(person5.name)
console.log(person4.friends)
console.log(person5.friends)

输出:

tom                                 
true                                
parent4                             
[ 'p1', 'p2', 'p3', '无始', '狂蟒' ]
[ 'p1', 'p2', 'p3', '无始', '狂蟒' ]

寄生式继承

使用原型式继承可以获得一份目标对象的浅拷贝然后利用这个浅拷贝的能力再进行增强添加一些方法

  • 寄生式继承相比于原型式继承还是在父类基础上添加了更多的方法
let parent5 = {name:"parent5",friends:["p1","p2","p3"],getName:function () {return this.name}
}function clone(original) {let clone = Object.create(original)clone.getFriends = function (){return this.friends}return clone
}let person5 = clone(parent5);
let person6 = clone(parent5);
person5.friends.push("666")
console.log(person5.getName())
console.log(person5.getFriends())
console.log(person6.getName())
console.log(person6.getFriends())let person5 = clone(parent5);
console.log(person5.getName())
console.log(person5.getFriends())

输出:

parent5                    
[ 'p1', 'p2', 'p3', '666' ]
parent5                    
[ 'p1', 'p2', 'p3', '666' ]

寄生组合式继承(强烈推荐)

在前面这几种继承方式的优缺点基础上进行改造得出了寄生组合式的继承方式
这也是所有继承方式里面相对最优的继承方式

function clone(parent, child) {// 这里改用 Object.create 就可以减少组合继承中多进行一次构造的过程child.prototype = Object.create(parent.prototype)child.prototype.constructor = child
}function Parent6(){this.name = "parent6"this.play = [1,2,3]
}Parent6.prototype.getName = function () {return this.name
}function Child(){Parent6.call(this)this.friends = 'child6'
}clone(Parent6,Child)Child.prototype.getFriends = function () {return this.friends
}let person6 = new Child()
console.log(person6)
console.log(person6.getName())
console.log(person6.getFriends())

输出:

Child { name: 'parent6', play: [ 1, 2, 3 ], friends: 'child6' }
parent6                                                        
child6  

总结

在这里插入图片描述

extends 实现继承(超推荐 ES6)

语法糖

class Person{constructor(name) {this.name = name}getName = function () {console.log('Person:',this.name)return this.name}
}class Gamer extends Person{constructor(name,age) {super(name);this.age = age}
}let gamer = new Gamer("无始无终",26);
console.log(gamer.getName())

输出:

Person: 无始无终
无始无终 

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

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

相关文章

三天学会阿里分布式事务框架Seata-seata事务日志mysql持久化配置

锋哥原创的分布式事务框架Seata视频教程: 实战阿里分布式事务框架Seata视频教程(无废话,通俗易懂版)_哔哩哔哩_bilibili实战阿里分布式事务框架Seata视频教程(无废话,通俗易懂版)共计10条视频&…

navicat16

Navicat16: 链接: https://pan.baidu.com/s/1vIfX0qEEL4mhBrsEzD_-lw?pwdy3fi 提取码: y3fi 破解教程视频:2023年Navicat16破解教程(小白教程)_哔哩哔哩_bilibili

1、云原生安全之K8S的部署与常用命令

文章目录 1、常用命令1.1、基本信息查看1.2、日志查看与问题排查1.3、进入pod与pod内部文件导出1.4、环境搭建相关1.5、镜像相关1.6、电脑重启后,重启k8s服务1.7、关于k8s的持久卷二、k8s的部署2.1、配置环境2.1.1、安装所需工具2.1.2、修改主机名2.1.3、编辑hosts2.1.4、其他…

第13集《灵峰宗论导读》

《灵峰宗论》导读。诸位法师,诸位同学,阿弥陀佛!(阿弥陀佛!) 请大家打开讲义第38面。 丙三、结示 这一科是《正见篇》的结示。《正见篇》主要的是要引导我们能够正确地观察生命的真相。生命的真相就是说…

【RISC-V 指令集】RISC-V DSP 扩展指令集介绍(二)

前言: 本笔记是基于对RISC-V DSP扩展指令集文档总结的,《P-ext-proposal.pdf》文档的关键内容如下: 主要介绍了RISC-V的P扩展指令集及其相关细节。 首先,对P扩展指令进行了概述,并列出了其与其他扩展重复的指令。 …

Java 的notify 可能导致死锁原因详解

假设有一个共享资源库 ResourcePool,它内部维护了两类资源:ResourceTypeA 和 ResourceTypeB。现在有两个线程 Thread1 和 Thread2,它们都需要从资源库中分别获取一种资源才能继续执行。Thread1 需要 ResourceTypeA 而 Thread2 需要 ResourceT…

上位机图像处理和嵌入式模块部署(当前机器视觉新形态)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 过去的机器视觉处理,大部分都是集中在上位机、或者是服务器领域,这种形式维持了很长的时间。这种业务形态下,无…

windows 11 蓝牙突然消失

解决方法: 1.WinX,点击设备管理器 2.选中蓝牙,右键更新驱动。 3.然后就可以出现了,如下图

Django多个app配置多个域名访问

环境:Python 3.8.1 Django 2.2.12 项目目录结构: CellMiddle -- 项目根目录 ├─task --- 需求系统 │ ├─migrations │ ├─static │ └─templates ├─logs --- 日志目录 ├─doc --- 文档系统 │ ├─data │ ├─migrations │ ├─st…

程序员是如何看待“祖传代码”的?

目录 ​编辑 程序员是如何看待“祖传代码”的? 一、什么是“祖传代码”? 二、“祖传代码”的利弊 1. 可以节省开发成本 2. 可能引入安全隐患 3. 可能增加系统的维护难度 三、祖传代对程序员的影响 1. 丰富程序员的技能和知识 2. 提高程序员的创…

python笔记_进制

二进制 进位规则:满2进1 范围:0,1 符号:以0b和0B开头 八进制 进位规则:满8进1 范围:0-7 符号:以0o和0O开头 十进制 进位规则:满10进1 范围:0-9 十六进制 进位规则&#xff…

Python——Tchisla求解器(暴力搜索法)

Tchisla简介 最近玩到一个挺有意思的数字解密小游戏《Tchisla》,其规则类似算24点,也是利用一些数学运算和初始数字计算出目标数字,与算24点不同的是,Tchisla允许不限次数地使用一种初始数字(1~9)&#xf…

【VSCODE修改代码行间距】解决方案

在我们编码的过程中,由于显示字体和显示器的不同,会需要调整行间距,在vscode默认的选项中没有看到设定行间距的选项,不过,可以手动修改配置档达到目的。 1.打开设置 2.打开配置档,手动进行设定 3.在选项中添…

第七十二天 漏洞发现-Web框架中间件联动GobyAfrogXrayAwvsVulmap

第72天 漏洞发现-Web框架中间件&联动&Goby&Afrog&Xray&Awvs&Vulmap 知识点: 1、Bup简单介绍&使用说明 2、Xray简单介绍&使用说明 3、AWWS简单介绍&使用说明 4、Goby简单介绍&使用说明 5、Afrog简单介绍&使用说明 6、…

带你玩转java封装和继承(上)

上次带大家学习了java里面比较重要的知识点类和对象,而且我们知道java是一门面向对象的语言,有时一个程序里可能有很多类,那么这么多类他们之间有什么联系吗?今天就带大家学习一下java类之间的关系。 什么是继承: 我们…

Linux信号【systemV】

目录 前言 正文: 1消息队列 1.1什么是消息队列? 1.2消息队列的数据结构 1.3消息队列的相关接口 1.3.1创建 1.3.2释放 1.3.3发送 1.3.4接收 1.4消息队列补充 2.信号量 2.1什么是信号量 2.2互斥相关概念 2.3信号量的数据结构 2.4…

lambda表达式 —— 过滤再排序未生效问题排查

背景 项目中有个场景&#xff0c;需要将一个列表先按要求过滤&#xff0c;再根据某字段排序。图方便使用lambda表达式修改原列表将过滤和排序逻辑写到一行&#xff0c;打印输出列表发现过滤未生效。 代码示例&#xff1a; List<Long> productIdList Arrays.asList(1L);…

向爬虫而生---Redis 探究篇4<Redis主从复制(1)>

前言: 当涉及到Redis的高可用性和数据冗余时&#xff0c;主从复制是一个非常重要的概念。 在现代应用程序的开发中&#xff0c;数据的可靠性和高可用性是至关重要的。当涉及到数据冗余和故障恢复时&#xff0c;Redis主从复制成为一个必不可少的工具和技术。Redis主从复制是一…

蓝桥杯-单片机组基础5——外部中断与LED的控制(附小蜜蜂课程代码)

蓝桥杯单片机组备赛指南请查看这篇文章&#xff1a;戳此跳转蓝桥杯备赛指南文章 本文章针对蓝桥杯-单片机组比赛开发板所写&#xff0c;代码可直接在比赛开发板上使用。 型号&#xff1a;国信天长4T开发板&#xff08;绿板&#xff09;&#xff0c;芯片&#xff1a;IAP15F2K6…

自学软件测试怎么学?

软件测试是一个变得越来越受欢迎的行业&#xff0c;在IT行业里面&#xff0c;也是初学比较容易的。但对小白而言&#xff0c;怎样学习才能做到快速入门&#xff0c;少走弯路呢&#xff1f; 步骤一&#xff1a;初学学软件测试&#xff0c;要先搞懂这种问题 要想进入到软件测试…