JS 实现继承的几种方式

现在有parent、child两个函数,child函数的实例想要访问parent函数的属性和方法(child想要继承parent)。

1、原型链继承

缺点:有引用的值共享的问题

即当parent某个属性是引用数据类型的时候,child实例如果修改了这个属性的内容则其他的child实例中这个属性也会一起改变(正常来说应该是互不干扰的,原始数据类型属性就是互不干扰的)

function parent(){this.data = '我是parent'
}function child(){}child.prototype = new parent()var fun = new child()console.log(fun.data)

2、构造函数集成

通过在child函数中独立执行parent( 此时parent的this指向window ),然后通过call方法改变parent的指向指向child实例( parent.call(this) ),这样new出来的child实例就能访问到parent中的属性和方法了。这种方法就称为构造函数继承。

缺点:使用这种方法child实例没有办法拿到parent函数原型上的属性和方法。

function parent(){this.data = '我是parent'
}parent.prototype.say = function(){console.log("我是parent原型")
}function child(){parent.call(this)
}var fun = new child()console.log(fun.data)        // 输出“我是parent”
fun.say()                    // 此处报错

3、组合继承(构造函数+原型链)

这个方法是结合了上述的两个方法:

  • 用构造函数继承中的child函数独立执行parent来解决原型链继承的引用值共享问题
  • 用原型链继承中child函数的原型指向parent的实例来解决构造函数中child实例无法访问parent原型上属性和方法的问题。

 缺点:new了两次parent,会产生了属性与方法重叠的问题。

function parent(){this.data = '我是parent'
}parent.prototype.say = function(){console.log("我是parent原型")
}function child(){parent.call(this)
}child.prototype = new parent()var fun = new child()console.log(fun.data)
fun.say()

 4、寄生组合继承(经典继承)

(第三种方法)组合继承:无论什么情况下,都会调用两次父类的构造函数。寄生组合式继承就解决了上述问题,被认为是最理想的继承方式。

function parent(){this.data = '我是parent'
}parent.prototype.say = function(){console.log("我是parent原型")
}function child(){parent.call(this)
}child.prototype = Object.create(parent.prototype)var fun= new child()console.log(fun.data)
fun.say()

5、原型式继承

原型式继承是一种基于已有对象创建新对象的继承方式,适用于简单对象的继承。在 JavaScript 中可以使用 Object.create 方法来实现原型式继承。

// 原型对象
var parent = {name: 'parent',age: 30,say: function () {return '我是' + this.name}
}// 基于原型对象创建新对象
var child= Object.create(parent)child.name = 'Alice'   // 修改属性值
child.age = 25         // 修改属性值console.log(child.say()) // 输出 "我是 Alice"

6、es6的extends类继承 

 child类通过extends继承了parent类的属性和方法。

class Parent {constructor(name) {this.name = name}// 原型方法// 即 Parent.prototype.getName = function() { }// 下面可以简写为 getName() {...}getName = function () {console.log('Parent:', this.name)}
}
class Child extends Parent {constructor(name, age) {// 子类中存在构造函数,则需要在使用“this”之前首先调用 super()。super(name)this.age = age}
}
const asuna = new Child('Asuna', 20)
asuna.getName() // 成功访问到父类的方法

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

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

相关文章

SK Hynix 探索超低温技术,开启400层以上3D NAND制造新时代

随着存储技术的飞速发展,SK Hynix作为韩国存储巨头,正以前沿的制造技术引领行业变革。据韩国媒体TheElec独家报道,SK Hynix正积极研究在超低温条件下生产3D NAND闪存的可能性,此举有望助力其下一代产品突破400层的技术瓶颈&#x…

在做题中学习(50):搜索插入位置

35. 搜索插入位置 - 力扣(LeetCode) 解法:二分查找 思路:题目是有序的,时间复杂度O(logN),二分没跑了,题目说如果找不到target,返回它应该被插入位置的下标,所以可以分析一下示例2&…

设计模式一

单例模式(Singleton Pattern)是一种常用的软件设计模式,旨在确保一个类只有一个实例,并提供一个全局访问点。单例模式常用于控制资源密集型对象的创建,如数据库连接池、线程池等,以避免资源浪费。 单例模式…

后教培时代的新东方,正在找寻更大的教育驱动力?

近段时间,K12教育主要上市公司的阶段性业绩皆已出炉。从具体数据来看,随着时间推移,教培机构的转型之路已愈走愈顺。 财报显示,2023年12月1日-2024年2月29日,好未来实现营收4.3亿美元,同比增长59.7%&#…

C语言什么是“野指针”?

一、问题 “野指针”是⼀个⽐较陌⽣的术语,那么它到底是什么呢? 二、解答 当程序⾥声明了⼀个指针⽽又没有给这个指针赋值,使其指向⼀个地址时,这样的指针就称为“野指针”。 “野指针”会随意地指向⼀个地址。当对这个指针进⾏操…

Debian操作系统简史

一,起源和初衷 Debian项目始于1993年,由Ian Murdock发起,他当时是普渡大学的一名学生。Debian的名字来源于Ian Murdock和他的妻子Debra的组合。Debian的核心理念是创建一个完全自由的操作系统,它遵循严格的自由软件指导原则。 二…

Parallels Desktop 19 for Mac v19.3.0.54924中文破解版

Parallels Desktop 19 for Mac v19.3.0.54924中文破解版是一款强大的虚拟机软件,支持多操作系统,提供卓越的虚拟化技术,确保流畅稳定的运行。新增特色功能如共享打印、TouchID集成等,提供便捷高效的虚拟机体验。界面美观现代&…

认识大模型提示词

一、写作助理 💥最常使用的 prompt,用于优化文本的语法、清晰度和简洁度,提高可读性。 输入:作为一名写作改进助理,你的任务是改进所提供文本的拼写、语法、清晰、简洁和整体可读性,同时分解长句&#xff…

Google Earth Engine谷歌地球引擎计算遥感影像在每个8天间隔内的多年平均值

本文介绍在谷歌地球引擎(Google Earth Engine,GEE)中,求取多年时间中,遥感影像在每1个8天时间间隔内的多年平均值的方法。 本文是谷歌地球引擎(Google Earth Engine,GEE)系列教学文章…

[机器学习-01]一文了解|机器学习简介、工具选择和Python包基础应用

目录 前言 正文 01-机器学习简介 (1)诞生过程 (2)人工智能、机器学习和深度学习之间的关系 (3)机器学习核心 02-机器学习工具 (1)Anaconda简介 (2)Jupyte…

【千帆平台】使用AppBuilder零代码创建应用,Excel表格数据转为Markdown格式文本

欢迎来到《小5讲堂》 这是《千帆平台》系列文章,每篇文章将以博主理解的角度展开讲解。 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 目录 前言创建应用应用名称应用描述应用头像角色指令组件能力开场白推…

springcloud报错:Failed to start bean‘webServerStartStop‘

如果你正在使用nacos进行服务注册,然后报一下错误: 那就说明的nacos没有打开,所以找到你的下载nacos的文件夹 好了,错误完美解决~

Leetcode—387. 字符串中的第一个唯一字符【简单】

2024每日刷题&#xff08;127&#xff09; Leetcode—387. 字符串中的第一个唯一字符 实现代码 class Solution { public:int firstUniqChar(string s) {int count[26] {0};for(char c: s) {count[c - a];}for(int i 0; i < s.length(); i) {if(count[s[i] - a] 1) {re…

射频无源器件之耦合器

一. 耦合器的作用 在射频电路中,射频耦合器将一路微波功率按比例分成几路,用于检测或监测信号,如功率测量和波检测,还可改变信号的幅度、相位等特性,以满足不同的通信需求。根据输入与耦合端的功率差,常被分为5dB、6dB、10dB等耦合器。射频耦合器的类型主要包括定向耦合…

配置端口隔离,实现同一vlan中主机不互通,再配置三层交换机vlanif接口实现二层隔离三层互通。

连接同一交换机的主机可以通过交换机端口配置不同的vlan进行隔离。但是如果数量过多会造成vlan压力&#xff08;如企业中的用户超过4094&#xff09;。 port-isolate mode l2 实现二层隔离&#xff1a; 通过端口隔离的方式在二层实现隔离&#xff1a;如把端口1和端口2都放进同…

TF-IDF解释

TF-IDF 表征了某个词对于一段文本的重要性和独特性 假设我们有以下三段简短的文本数据: 文本1: 这个苹果很新鲜很甜 文本2: 我买了一个苹果非常喜欢 文本3: 这个苹果皮非常光滑 首先,我们构建这个小文本集合的词典(vocabulary),去掉一些常见的无意义词语(如"的"、&q…

OSPF Stub区域

原理概述 OSPF 协议定义了多种区域&#xff08; Area &#xff09;类型&#xff0c;其中比较常见的有 Stub 区域和 Totally Stub 区域。区域的类型决定了在这个区域当中所存在的 LSA 的类型。 Stub 区域不允许 Type-4和 Type-5 LSA 进入&#xff0c;该区域会通过 Type-3 LSA…

BFS专题——FloodFill算法:200.岛屿数量

文章目录 题目描述算法原理代码实现CJava 题目描述 题目链接&#xff1a;200.岛屿数量 PS:注意题目中每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。也就是说斜角是不算了&#xff0c; 例如示例二&#xff0c;是三个岛屿。 算法原理 这道题目是 DFS&#xff0…

实战BACnet/IP标准通信网关在楼宇自动化中的应用

智慧楼宇建设实现不同设备间的互联互通是一项巨大挑战&#xff0c;尤其是在那些历史悠久的建筑中&#xff0c;新旧系统并存的情况尤为普遍。某大型商业综合体就面临着这样的困境&#xff1a;老旧的暖通空调系统采用Modbus RTU协议&#xff0c;而新部署的能源管理系统却要求BACn…

信息系统架构_1.架构风格

1.信息系统架构风格 信息系统架构设计的一个核心问题是能否使用重复的信息系统架构模式&#xff0c;即能否达到架构级别的软件重用。也就是说&#xff0c;能否在不同的软件系统中&#xff0c;使用同一架构。 信息系统架构风格是描述某一特定应用领域中系统组织方式的惯用模式。…