JavaScript继承的方法和优缺点

embedded/2024/9/19 11:04:15/ 标签: javascript, 开发语言, ecmascript

原型链继承

让一个构造函数的原型是另一个类型的实例,那么这个构造函数new出来的实例就具有该实例的属性。

优点:

写法方便简洁,容易理解。

缺点:

在父类型构造函数中定义的引用类型值的实例属性,会在子类型原型上变成原型属性被所有子类型实例所共享。同时在创建子类型的实例时,不能向超类型的构造函数中传递参数。

代码

javascript">// 原型链继承
function Parent() {this.parentPrototype = "父级原型"this.parentObj = {info: "父级引用属性值info"}
}
function child() { }
child.prototype = new Parent();
const a = new child()
console.log(a.parentPrototype)
const b = new child()
a.parentObj.info = "a里面的"
console.log(b.parentObj.info)

结果

借用构造函数继承

在子类型构造函数的内部调用父类型构造函数;使用 apply() 或 call() 方法将父对象的构造函数绑定在子对象上。

优点:

解决了原型链实现继承的不能传参的问题和父类的原型共享的问题。

缺点:

借用构造函数的缺点是方法都在构造函数中定义,因此无法实现函数复用。在父类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。

代码

javascript">function Parent(name) {this.name = name;
}function Child(name, age) {Parent.call(this, name); // 使用call将Parent构造函数绑定到Child上this.age = age;
}let child = new Child('Parent', 25);
console.log(child.name); // 输出 'Parent'

结果

组合继承:原型链 + 构造函数 

将原型链和借用构造函数的组合到一块。使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有自己的属性。

优点:

解决了原型链继承和借用构造函数继承造成的影响。

缺点:

无论在什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

代码

javascript">function Parent(name) {this.name = name;
}Parent.prototype.getName = function() {return this.name;
};function Child(name, age) {Parent.call(this, name); // 构造函数继承this.age = age;
}Child.prototype = new Parent(); // 原型链继承let child = new Child('Parent', 25);
console.log(child.getName()); // 输出 'Parent'

结果

原型式继承

         在一个函数A内部创建一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。本质上,函数A是对传入的对象执行了一次浅复制。ECMAScript 5通过增加Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数:作为新对象原型的对象,以及给新对象定义额外属性的对象(第二个可选)。在只有一个参数时,Object.create()与这里的函数方法效果相同。

优点:

不需要单独创建构造函数。

缺点:

属性中包含的引用值始终会在相关对象间共享。

代码

javascript">function object(o) {function F() {}F.prototype = o;return new F();
}let parent = {name: 'Parent',getName: function() {return this.name;}
};let child = object(parent);
console.log(child.getName()); // 输出 'Parent'

结果

寄生式继承

寄生式继承背后的思路类似于寄生构造函数和工厂模式:创建一个实现继承的函数,以某种方式增强对象,然后返回这个对象。

优点:

写法简单,不需要单独创建构造函数。

缺点:

通过寄生式继承给对象添加函数会导致函数难以重用。

代码

javascript">function createAnother(original) {let clone = object(original);clone.sayHi = function() {return 'Hi';};return clone;
}let parent = {name: 'Parent',getName: function() {return this.name;}
};let child = createAnother(parent);
console.log(child.sayHi()); // 输出 'Hi'

结果

寄生组合式继承 (寄生+组合(原型链+借用构造函数))

通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

优点:

高效率只调用一次父构造函数,并且因此避免了在子原型上面创建不必要,多余的属性。与此同时,原型链还能保持不变。

缺点:

代码复杂。

代码

javascript">function inheritPrototype(subType, superType) {let prototype = Object.create(superType.prototype);prototype.constructor = subType;subType.prototype = prototype;
}function Parent(name) {this.name = name;
}Parent.prototype.sayName = function () {console.log(this.name);
}function Child(name) {Parent.call(this, name);
}inheritPrototype(Child, Parent);let child1 = new Child('child1');
console.log(child1)

结果


http://www.ppmy.cn/embedded/34596.html

相关文章

# 从浅入深 学习 SpringCloud 微服务架构(十)--zuul(1)

从浅入深 学习 SpringCloud 微服务架构(十)–zuul(1) 1、Zuul 简介 ZUUL 是 Netflix 开源的微服务网关,它可以和 Eureka、Ribbon、Hystrix 等组件配合使用,Zuul 组件的核心是一系列的过滤器,这…

【深入理解神经网络:预测和评估】

文章目录 前言环境准备数据导入和处理数据归一化神经网络的创建与训练预测与评估结果可视化应用结论 前言 在这篇博客文章中,我们将深入研究利用神经网络进行数据预测和性能评估的过程。我们将详解在MATLAB环境下使用的一个例子,该例子展示了如何使用MAT…

2万字长文:海豚调度器(DolphinScheduler)面试题深入了解

目录 海豚调度器的主要功能和特点 海豚调度器与Oozie、Azkaban等调度器相比的优势

第 10 场蓝桥杯小白入门赛题解

1.五一礼物【算法赛】 - 蓝桥云课 (lanqiao.cn) #include <iostream> using namespace std; int main() {cout<<"51"<<endl;return 0; }2.合成贤者之石【算法赛】 - 蓝桥云课 (lanqiao.cn) 假设黄水晶的个数是 x x x,那蓝水晶个数肯定是 x − 1 …

WSL2连接Windows主机的Mysql

文章目录 需求查看主机IP防火墙设置Mysql设置允许远程连接WSL2连接Mysql 需求 在WSL2&#xff08;本机Ubuntu20.04&#xff09;运行的程序需要将数据写入到本机的Mysql服务器中 查看主机IP 两种办法&#xff1a; Windows主机输入 ipconfig&#xff0c;找到带有WSL后缀的部分…

室外巡检机器人——A2型高防护轮式巡检机器人

在科技日新月异的时代&#xff0c;室外巡检机器人犹如一位无畏的守护者&#xff0c;悄然出现在我们的视野之中。它迈着坚定的步伐&#xff0c;穿梭于各种复杂的室外环境&#xff0c;承担着重要的巡检任务。它是科技与智慧的结晶&#xff0c;是保障安全与稳定的前沿力量。让我们…

基于Java的智慧社团综合管理系统的设计与实现(论文+源码)_kaic

摘 要 随着校园文化的不断丰富&#xff0c;大学里各种社团越来越多&#xff0c;社团活动也越来越频繁&#xff0c;社员也越来越多&#xff0c;而且大学生退社、入社比较频繁&#xff0c;社团管理就显得非常繁琐而又复杂,如果采用人工管理,对管理员来说将是一件很头疼的事情。设…

FR在开发组件时的注意事项

FR目前可以在三个地方开发自己的组件&#xff0c;普通报表参数面板上&#xff0c;普通报表填报下&#xff0c;决策系统中。 其中普通报表参数面板&#xff0c;决策系统中开发组件的属性是返回 CRPropertyDescriptor[] supportedDescriptor() 这种方式是提供属性的名字&#x…

proxmox宿主机安装桌面

装完proxmox启动后一般进入shell界面&#xff0c;之后都是另外一台电脑连接web管理等操作&#xff0c;一直用起来还好。不过这样需要另外一台电脑连接管理操作&#xff0c;有时候调试时毕竟还是会有些不方便&#xff0c;就想能不能在宿主机上装个桌面做这类事&#xff0c;今天用…

Java面试题:多线程1

线程和进程的区别 进程 程序由指令和数据组成 指令的运行和数据的读写依赖于将指令加载到CPU,数据加载到内存,在指令运行过程中还需要用到IO设备 进程就是用以加载指令,管理内存,管理IO的 当一个程序被运行,从磁盘加载这个程序的代码到内存,就开启了一个线程 多实例进程和…

Microsoft Remote Desktop Beta for Mac:远程办公桌面连接工具

Microsoft Remote Desktop Beta for Mac不仅是一款远程桌面连接工具&#xff0c;更是开启远程办公新篇章的利器。 它让Mac用户能够轻松访问和操作远程Windows计算机&#xff0c;实现跨平台办公的无缝衔接。无论是在家中、咖啡店还是旅途中&#xff0c;只要有网络连接&#xff0…

虚拟机网络桥接模式无法通信,获取到的ip为169.254.X.X

原因&#xff1a;VMware自动选择的网卡可能不对 解决&#xff1a;编辑-虚拟网络编辑器-更改桥接模式-选择宿主机物理网卡&#xff0c;断开虚拟机网络连接后重新连接即可

php扩展

查看扩展: print_r(get_loaded_extensions());判断扩展: if (!extension_loaded(gd)) {if (!dl

解决虚拟机unbantu2204访问网络失败问题?

一、问题描述 unbantu先前可以正常访问网络&#xff0c;后面用着用着发现上不了网了&#xff0c; 出现如下异常 Hmm. We’re having trouble finding that site.We can’t connect to the server at www.iqiyi.com.If you entered the right address, you can:Try again late…

Linux 内核简介

操作系统简介 操作系统概念&#xff1a;操作系统处于硬件和应用程序的中间层&#xff0c;控制和管理整个计算机系统的硬件和软件资源&#xff0c;提供给用户和其他软件方便的接口和环境&#xff0c;它是计算机系统的最基本的系统软件。 操作系统功能: 处理机管理存储器管理设…

Bookends for Mac:文献管理工具

Bookends for Mac&#xff0c;一款专为学术、研究和写作领域设计的文献管理工具&#xff0c;以其强大而高效的功能深受用户喜爱。这款软件支持多种文件格式&#xff0c;如PDF、DOC、RTF等&#xff0c;能够自动提取文献的关键信息&#xff0c;如作者、标题、出版社等&#xff0c…

c语言:打印任意行数的菱形

例如&#xff1a;以下图片形式 #include <stdio.h> int main() {int line 0;scanf_s("%d", &line);int i 0;//打印上半部分for (i 0; i < line; i){//打印空格数int j 0;for (j 0; j < line - 1 - i; j){printf(" ");}//打印*数量for…

STM32F1之FLASH闪存

目录 1. 简介 2. 闪存模块组织 3. FLASH基本结构 4. FLASH解锁 5. 使用指针访问存储器 6. 程序存储器全擦除 7. 程序存储器页擦除 8. 程序存储器编程 9. 选项字节 1. 简介 STM32F1系列的FLASH包含程序存储器、系统存储器和选项字节三个部分&#xff0c;通过…

C#条件运算符

条件运算符分为&#xff1a;&#xff08;比较运算符 判断运算符&#xff09; 条件运算符的作用: 用于比较两个变量或者常量 判断符号: > < ! > < 条件运算符不能直接使用 需要搭配运算符使用 <u>*如果条件满足则返回true 条件不满足则返回fals…

量子计算编程框架Forest

一、介绍 Forest是由Rigetti Computing开发的一个量子计算编程框架。Forest包括两个主要组件:PyQuil和Quil。PyQuil是Forest的Python库,用于编写和运行量子程序。它提供了一系列的API,可以用于定义量子电路、操作量子比特和测量量子比特等。通过PyQuil,用户可以使用Python…