JS 常见的 6 种继承方式

原型链继承

原型链继承是比较常见的继承方式之一,其中涉及的构造函数、原型和实例,三者之间存在着一定的关系,即每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针,而实例则包含一个原型对象的指针。例如:

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

上面的代码其实有一个潜在的问题,例如:

var s1 = new Child1();
var s2 = new Child1();
s1.play.push(4);
console.log(s1.play);
console.log(s2.play);

执行结果如下:

当我修改了s1的play属性的时候,s2的play属性也跟着变了,因为两个实例使用的是同一个原型对象。它们的内存空间是共享的,当一个发生变化的时候,另外一个也随之进行了变化,这就是使用原型链继承方式的一个缺点。

构造函数继承(借助 call)

function Parent1(){this.name = 'parent1';
}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 的属性 type 之外,也继承了 Parent1 的属性 name。这样写的时候子类虽然能够拿到父类的属性值,解决了第一种继承方式的弊端,但问题是,父类原型对象中一旦存在父类之前自己定义的方法,那么子类将无法继承这些方法。

因此构造函数实现继承的优缺点,它使父类的引用属性不会被共享,优化了第一种继承方式的弊端;但是随之而来的缺点也比较明显——只能继承父类的实例属性和方法,不能继承原型属性或者方法。

组合继承(前两种组合)

这种方式结合了前两种继承方式的优缺点,结合起来的继承,代码如下:

function Parent3 () {this.name = 'parent3';this.play = [1, 2, 3];}Parent3.prototype.getName = function () {return this.name;}function Child3() {// 第二次调用 Parent3()Parent3.call(this);this.type = 'child3';}// 第一次调用 Parent3()Child3.prototype = new Parent3();// 手动挂上构造器,指向自己的构造函数Child3.prototype.constructor = Child3;var s3 = new Child3();var s4 = new Child3();s3.play.push(4);console.log(s3.play);  // 不互相影响console.log(s4.play);console.log(s3.getName()); // 正常输出'parent3'console.log(s4.getName()); // 正常输出'parent3'

结果如下:

之前方法一和方法二的问题都得以解决,但是这里又增加了一个新问题:通过注释我们可以看到 Parent3 执行了两次,第一次是改变Child3 的 prototype 的时候,第二次是通过 call 方法调用 Parent3 的时候,那么 Parent3 多构造一次就多进行了一次性能开销。

原型式继承

ES5 里面的 Object.create 方法,这个方法接收两个参数:一是用作新对象原型的对象、二是为新对象定义额外属性的对象(可选参数)。

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

执行结果如下:

通过 Object.create 这个方法可以实现普通对象的继承,不仅仅能继承属性,同样也可以继承 getName 的方法。前三个输出都是正常的,最后两个输出结果一致是因为Object.create 方法是可以为一些对象实现浅拷贝的,那么关于这种继承方式的缺点也很明显,多个实例的引用类型属性指向相同的内存。

寄生式继承

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

虽然其优缺点和原型式继承一样,但是对于普通对象的继承方式来说,寄生式继承相比于原型式继承,还是在父类基础上添加了更多的方法。实现如下:

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);console.log(person5.getName());
console.log(person5.getFriends());

输出结果如下:

从最后的输出结果中可以看到,person5 通过 clone 的方法,增加了 getFriends 的方法,从而使 person5 这个普通对象在继承过程中又增加了一个方法,这样的继承方式就是寄生式继承。

寄生组合式继承

结合第四种中提及的继承方式,解决普通对象的继承问题的 Object.create 方法,我们在前面这几种继承方式的优缺点基础上进行改造,得出了寄生组合式的继承方式,这也是所有继承方式里面相对最优的继承方式,代码如下:

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 Child6() {Parent6.call(this);this.friends = 'child5';
}clone(Parent6, Child6);Child6.prototype.getFriends = function () {return this.friends;
}let person6 = new Child6();
console.log(person6);
console.log(person6.getName());
console.log(person6.getFriends());

执行结果如下:

这种寄生组合式继承方式,基本可以解决前几种继承方式的缺点,较好地实现了继承想要的结果,同时也减少了构造次数,减少了性能的开销。整体看下来,这六种继承方式中,寄生组合式继承是这六种里面最优的继承方式。

ES6的extends关键字实现逻辑

ES6提供了extends语法糖,使用关键字很容易实现JavaScript的继承,先看一下extends使用方法。

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

使用babel将ES6 的代码编译成 ES5,代码如下:

function _possibleConstructorReturn (self, call) { // ...return call && (typeof call === 'object' || typeof call === 'function') ? call : self; 
}
function _inherits (subClass, superClass) { // 这里可以看到subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}var Parent = function Parent () {// 验证是否是 Parent 构造出来的 this_classCallCheck(this, Parent);
};
var Child = (function (_Parent) {_inherits(Child, _Parent);function Child () {_classCallCheck(this, Child);return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).apply(this, arguments));
}return Child;
}(Parent));

从上面编译完成的源码中可以看到,它采用的也是寄生组合继承方式,因此也证明了这种方式是较优的解决继承的方式。

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

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

相关文章

WebSocket协议

WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接, 并进行双向数据传输 HTTP协议和WebSocket协议对比: HTTP是短连接WebSocket是长连接HT…

【遮天】李小曼回归,新形象无差云曦,短板竟是身材?

Hello,小伙伴们,我是小郑继续为大家深度解析遮天 最新一集《遮天》已经更新,在成功卖掉段德之后,叶凡便离开妖帝坟冢,毕竟他身上拥有庞博从妖帝坟冢带出来的道经和被誉为中州至宝的绿铜 虽然这两样物品都在叶凡的苦海中&#xff0…

【Linux】序列化与反序列化

目录 前言 什么是应用层? 再谈"协议" 什么是序列化和反序列化 网络版计算器 整体流程实现 Sock.hpp的实现 TcpServer.hpp的实现 Protocol.hpp的实现 CalServer.cc的编写 CalClient.cc的编写 整体代码 前言 本章是属于TCP/UDP四层模型中的第一层…

VSCode连接服务器

Pycharm连接服务器参考我的另一篇文章Pycharm远程连接服务器_pycharm进入服务器虚拟环境终端_Jumbo星的博客-CSDN博客 本质上Pycharm和VSCode都只是IDE,没有什么好坏之分。但是因为Pycharm连接服务器(准确来说是部署)需要买professional。而…

价格战开打!技术比拼升级,AR HUD“普及化”如何破局?

眼下,AR HUD的装载量迎来了高速增长,但同时“价格战”也已经悄然打响。 根据《高工智能汽车》了解,伴随着越来越多汽车品牌搭载AR HUD,AR HUD前装供货价格已经下降至2000元以下,部分产品甚至跌破了1000元。 多位企业…

Shell 脚本入门

目录 一、Shell是什么 1.1 我们为什么要学习Shell和使用Shell? 1.2 Shell的分类有哪些? 二、Shell脚本入门知识 2.1 Shell文件命名规范 2.2 Shell解析器 2.3 用Shell 编写hello World 三、Shell的四种变量类型 3.1 系统预定义变量 3.2 自定义变…

JavaWeb 速通Ajax

目录 一、Ajax快速入门 1.基本介绍 : 2.使用原理 : 二、Ajax经典入门案例 1.需求 : 2.前端页面实现 : 3. 处理HTTP请求的servlet实现 4.引入jar包及druid配置文件、工具类 : 5.Domain层实现 : 6.DAO层实现 : 7.Service层实现 : 8.运行测试 : 三、JQuery操作Ajax 1 …

kvm虚拟机开启VNC功能

停止kvm虚拟机 virsh shutdown 虚拟机名称 在kvm虚拟机配置文件里面添加如下内容 <graphics typevnc port-1 autoportyes listen0.0.0.0 keymapen-us passwd123456> 启动kvm虚拟机 virsh start 虚拟机名称 得到虚拟机进程id ps -ef|grep 虚拟机名称 得到虚拟机vnc…

kubernetes deploy standalone mysql demo

kubernetes 集群内部署 单节点 mysql ansible all -m shell -a "mkdir -p /mnt/mysql/data"cat mysql-pv-pvc.yaml apiVersion: v1 kind: PersistentVolume metadata:name: mysql-pv-volumelabels:type: local spec:storageClassName: manualcapacity:storage: 5Gi…

使用Rust开发命令行工具

生成二进制文件&#xff0c;将其扔到环境变量的path下即可~ 用rust打造实时天气命令行工具[1] 找到合适的API 使用该api[2] 如请求 api.openweathermap.org/data/2.5/weather?qBeijing&appidyour_key: { "coord": { "lon": 116.3972, "lat&quo…

【爬虫小知识】如何利用爬虫爬网页——python爬虫

前言 网络时代的到来&#xff0c;给我们提供了海量的信息资源&#xff0c;但是&#xff0c;想要获取这些信息&#xff0c;手动一个一个网页进行查找&#xff0c;无疑是一项繁琐且效率低下的工作。这时&#xff0c;爬虫技术的出现&#xff0c;为我们提供了一种高效的方式去获取…

无涯教程-分类算法 - 随机森林

随机森林是一种监督学习算法&#xff0c;可用于分类和回归&#xff0c;但是&#xff0c;它主要用于分类问题&#xff0c;众所周知&#xff0c;森林由树木组成&#xff0c;更多树木意味着更坚固的森林。同样&#xff0c;随机森林算法在数据样本上创建决策树&#xff0c;然后从每…

利用PDF.js在微信小程序里预览PDF文件

在微信小程序可以通过wx.downloadFile 和 wx.openDocument 两个api下载并打开pdf文件。这种方式主要有不少的缺点&#xff1a; 1、需要下载才可以查看&#xff0c;且每次打开都需要下载生成一个临时文件&#xff0c;如果PDF文件比较多的话&#xff0c;临时文件会越来越多&…

【问题】jdk20执行虚拟线程报错解决方案

java: ofPlatform() 是预览 API&#xff0c;默认情况下处于禁用状态。 &#xff08;请使用 --enable-preview 以启用预览 API&#xff09; 在idea增加配置 编辑配置 增加jvm参数 然后去执行 public static void main(String[] args) {int 次数 100000;System.out.println(&q…

centos升级python3.10,中间遇到问题,终于解决了

升级为python3.10 yum updateyum install openssl-devel bzip2-devel libffi-develyum groupinstall "Development Tools"wget https://www.python.org/ftp/python/3.10.2/Python-3.10.2.tgztar -xzf Python-3.10.2.tgzcd Python-3.10.2./configure --enable-optimi…

硬件知识积累 USB 接口 type - A type - B type - C 的介绍与功能说明 (简单介绍)

1. USB 的介绍 1.1 USB 的定义 USB : 通用串行总线(英语: Universal Serial Bus&#xff0c;缩写:USB)是一种串口总线标准&#xff0c;也是一种输入输出接口的技术规范&#xff0c;被广泛地应用于个人电脑和移动设备等信息通讯产品&#xff0c;并扩展至摄影器材、数字电视&a…

[Opencv]中值滤波(medianBlur)

OPENCV中的均值滤波、方框滤波、高斯滤波&#xff0c;都是线性滤波方式&#xff0c;由于线性滤波的结果是所有像素值的线性组合&#xff0c;因此含有噪声的像素也会被考虑进去&#xff0c;噪声不会被消除&#xff0c;而是以更柔和的方式存在。如果需要去除这些噪声&#xff0c;…

电商项目part05 分布式ID服务实战

背景 日常开发中&#xff0c;需要对系统中的各种数据使用 ID 唯一表示&#xff0c;比如用户 ID 对应且仅对应一个人&#xff0c;商品 ID 对应且仅对应一件商品&#xff0c;订单 ID 对应且仅对应 一个订单。现实生活中也有各种 ID&#xff0c;比如身份证 ID 对应且仅对应一个人…

C#,《小白学程序》第七课:列表(List)应用之一“编制高铁车次信息表”

1 文本格式 /// <summary> /// 车站信息类 class /// </summary> public class Station { /// <summary> /// 编号 /// </summary> public int Id { get; set; } 0; /// <summary> /// 车站名 /// </summary>…

【无法联网】电脑wifi列表为空的解决方案

打开电脑, 发现wifi列表为空, 点击设置显示未连接 首先检查是不是网卡驱动有问题, cmd, devmgmt.msc 找到网络适配器, 看看网卡前面是否有感叹号, 如果没有则说明网卡没问题, 有问题则重装驱动 看看网络协议是否设置正确 找到"控制面板\所有控制面板项\网络和共享中心&…