JavaScript系列之实现继承的几种方式

news2024/11/15 5:05:43

文章の目录

  • 一、借助父构造函数继承属性
    • 1、实现方式
    • 2、优点
    • 3、缺点
  • 二、原型链继承
    • 1、实现方式
    • 2、优点
    • 3、缺点
  • 三、组合继承
  • 四、ES6继承的实现方式
  • 参考
  • 写在最后


一、借助父构造函数继承属性

1、实现方式

  1. 先定义一个父构造函数(this指向为window);
  2. 再定义一个子构造函数(this指向为new出的实例化对象);
  3. 子构造函数通过call()、apply()、bind()等方式改变父的this指向继承父构造函数属性;
function Person(name) {
	this.name = name;
	this.song = function () {
		console.log("唱歌");
	};
}
Person.prototype.phone = function () {
	console.log("打电话"); // 继承不了
};
function Son(name) {
	Person.call(this, name); // apply bind
}
let zhangsan = new Son("张三");
console.log(zhangsan);
console.log(zhangsan.phone());

在这里插入图片描述

2、优点

避免了原型链继承的两个缺点,可以向父类传参,且不会造成原型属性共享的问题(因为父类构造函数中的属性继承到子类构造函数中,而非原型对象中)。

3、缺点

不能继承原型属性,无法实现函数复用,所有方法都只能放在构造函数中。

二、原型链继承

原型链是针对原型对象的,在查找实例属性时,先在实例中查找,如果没有找到,再到obj.__proto__(=f1.prototype)原型对象,再到f1.prototype.__proto__(=f2.prototype),依次向上查找。

1、实现方式

将Person实例化给Son的原型对象,再实例化Son赋值给变量son,打印结果可见son通过prototype指向Father函数,Father函数通过prototype指向Object对象,让Son来继承其中的属性。

function Person(name) {
	this.name = name;
	this.song = function () {
		console.log("唱歌");
	};
}
Person.prototype.phone = function () {
	console.log("打电话"); // 继承不了
};
function Son(name) {}
Son.prototype = new Person();
let zhangsan = new Son("张三");
console.log(zhangsan);
console.log(zhangsan.phone());

在这里插入图片描述

2、优点

能够继承构造函数属性,也能够继承原型属性。

3、缺点

  1. 首先属性值为引用类型值的原型属性被修改后可能会影响到所有的实例,并在此继承方式中,构造函数中的属性会继承到子类型,成为子类的原型对象的属性,这也是要在构造函数中定义属性,在原型中定义公共方法的原因。
  2. 在创建子类的实例时,不能向父类的构造函数中传递参数。

三、组合继承

组合继承(combination inheritance),也叫做伪经典继承,指的是将原型链和借用父构造函数组合到一块,其思路是用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

function Person(name) {
	this.name = name;
	this.song = function () {
		console.log("唱歌");
	};
}
Person.prototype.phone = function () {
	console.log("打电话"); // 继承不了
};
function Son(name) {
	this.price = "price";
	this.setScore = function () {};
}
Son.prototype = new Person();
Son.prototype.constructor = Son;
let zhangsan = new Son("张三");
console.log(zhangsan);
console.log(zhangsan.phone());

在这里插入图片描述

四、ES6继承的实现方式

通过关键字extends和super来实现

super特点

  • super只能在子类中使用,可以在constructor 及 函数或静态方法中使用
  • 不能单独使用super
  • super调用类似函数调用可以根据父类构造函数传参数
  • 如果子类中没有constructor,子类会自动调取super()且传入参数到父类
  • 子类中需要在调取super之后调用this
class Person {
	static height = "178cm";
	constructor(name) {
		this.name = name;
	}
	fn() {
		console.log("父类的fn");
	}
}
class Son extends Person {
	constructor(name) {
		super(name);
		this.age = 20;
	}
	fn() {
		// console.log(super);
		super.fn();
		console.log("子类fn");
	}
}
console.log(Son.height);
let zhangsan = new Son("张三");
console.log(zhangsan);
zhangsan.fn();

参考

  1. 总结JS继承的六种方式

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

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

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

相关文章

了解Nginx,这一篇就够了

了解Nginx,这一篇就够了1.Nginx应用场景2.Nginx相关概念正向代理和反向代理负载均衡动静分离3.Nginx配置文件解析全局块events块http块1.Nginx应用场景 HTTP服务器:Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可…

玩转 Kubernetes 配置管理:ConfigMap 和 Secret 实战演示

目录一、简介二、ConfigMap2.1 基于目录创建 ConfigMap2.2 基于文件创建 ConfigMap2.3 从环境文件创建 ConfigMap2.4 定义从文件创建 ConfigMap 时要使用的键2.5 根据字符串创建 ConfigMap三、Secret3.1 基于文件创建Secret3.2 基于字符串创建Secret3.3 yaml文件方式创建secret…

安卓项目搭建grpc环境

本篇文章使用的IDE是Android Studio。这里先吐槽一句,安卓项目搭建grpc环境,不管是引入插件还是引入第三方库,对于版本的要求都极为苛刻,一旦版本不匹配就会报错,所以对于版本的搭配一定要注意。 下面介绍的这个版本搭…

CMake中cmake_host_system_information的使用

CMake中的cmake_host_system_information命令用于查询各种主机系统信息&#xff0c;其格式如下&#xff1a; cmake_host_system_information(RESULT <variable> QUERY <key> ...) # 1 cmake_host_system_information(RESULT <variable>QUERY WINDOWS_REGIST…

【爬虫理论实战】详解常见头部反爬技巧与验证方式 | 有 Python 代码实现

以下是常见头部反爬技巧与验证方式的大纲&#xff1a; User-Agent 字段的伪装方式&#xff0c;Referer 字段的伪装方式&#xff0c;Cookie 字段的伪装方式。 文章目录1. ⛳️ 头部反爬技巧1.1. User-Agent 字段&User-Agent 的作用1.2. 常见 User-Agent 的特征1.3. User-Age…

Spring IoC容器之常见常用注解以及注解编程模型简介

一、全文概览 本篇文章主要学习记录Spring中的核心注解&#xff0c;罗列常见常用的注解以及Spring中的注解编程模型介绍 二、核心注解 1、Spring模式注解 常用注解场景描述Spring起始支持版本Component通用组件模式注解&#xff0c;是所有组件类型注解的元注解Spring 2.5Repo…

【分库分表】企业级分库分表实战方案与详解(MySQL专栏启动)

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化&#xff0c;文章内容兼具广度、深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于…

计算机操作系统概述

文章目录1.0 操作系统概述1.1 操作系统的目标1.2 操作系统的功能1.3 操作系统结构1.4 操作系统接口1.5 操作系统的发展1.6 操作系统的特征2.0 进程管理2.1 进程调度2.2 进程调度算法2.3 进程间通信2.4 进程间的同步2.5 软件实现互斥的方法2.6 硬件实现互斥的方法2.7 信号2.8 管…

python基于django 医院急诊挂号系统

目录 1 绪论 1 1.1课题背景 1 1.2课题研究现状 1 1.3初步设计方法与实施方案 2 1.4本文研究内容 2 2 系统开发环境 4 2.1 JAVA简介 4 2.2MyEclipse环境配置 4 2.3 B/S结构简介 4 2.4MySQL数据库 5 2.5 SPRINGBOOT框架 5 3 系统分析 6 3.1系统可行性分析 6 3.1.1经济可行性 6 3.…

Mysql(二)索引、查询

索引一、索引索引分类MySQL索引结构**B和B-树的区别**语法创建修改删除查看二、MySQL查询一、索引 概念&#xff1a; 索引时帮助MySQL高效获取数据的数据结构 本质&#xff1a; 数据结构 实现&#xff1a; 在存储引擎层面实现的&#xff0c;而不是server层面。不是所有的存储引…

CNI 网络分析(九)Calico IPIP

文章目录环境流量分析Pod 间Node 到 PodPod 到 serviceNode 到 serviceNetworkPolicy理清和观测网络流量环境 可以看到&#xff0c;在宿主机上有到每个 pod IP 的路由指向 veth 设备 到对端节点网段的路由 指向 tunl0 下一跳 ens10 的 ip 有到本节点网段 第一个 ip 即 tunl0 的…

Prometheus监控案例之blackbox-exporter

blackbox-exporter简介 blackbox-exporter项目地址&#xff1a;https://github.com/prometheus/blackbox_exporter blackbox-exporter是Prometheus官方提供的一个黑盒监控解决方案&#xff0c;可以通过HTTP、HTTPS、DNS、ICMP、TCP和gRPC方式对目标实例进行检测。可用于以下使…

基于计算机视觉的建筑物火灾早期探测模型的开发

1.文章信息本次介绍的文章是2023年韩国延世大学作为一作发表的一篇关于基于计算机视觉的火灾检测文章&#xff0c;题目为《Development of early fire detection model for buildings using computer vision-based CCTV》。2.摘要建筑物的火灾直接影响到居住者的生命。因此&…

FL Studio最新发布21版本更新全部内容详情介绍

FL Studio最新发布21版本&#xff0c;也是一次重要的版本更新&#xff0c;让使用FL Studio软件的音乐制作人们进入到了全新的AI编曲时代&#xff0c;并改进了80多操作页面包括用户页面、项目文件夹、常规设置、导出导入等等&#xff0c;使用起来更加的简洁。本期给大家带来的是…

相关性-回忆录(持续更新)

1.TODO方向 &#xff08;1&#xff09;数据增强&#xff1a;finetuning阶段需要大量人工标注样本&#xff0c;消耗时间和成本。用户点击数据作为弱监督学习&#xff0c;可以尝试图网络构建节点和边&#xff08;query聚合&#xff09;&#xff1b; 使用展现未点击生成对抗网络进…

加油站会员管理小程序实战开发教程14 会员充值

我们上篇介绍了会员开卡的业务,开卡是为了创建会员卡的信息。有了会员卡信息后我们就可以给会员进行充值。当然了充值这个业务是由会员自主发起的。 按照我们的产品原型,我们在我的页面以轮播图的形式循环展示当前会员的所有卡信息。这个会员卡信息需要先用变量从数据源读取…

【算法】双指针

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法篇 &#x1f43e;或许会很慢&#xff0c;但是不可以停下来&#x1f43e; 文章目录1.双指针分类2.双指针思想3.双指针应用1.双指针分类 常见问题分类 (1) 对于一个序列&#xff0c;用两个指针维护一段区间, 比如快速排序。 …

SQL代码编码原则和规范

目录1、先了解MySQL的执行过程2、数据库常见规范3、所有表必须使用Innodb存储引擎4、每个Innodb表必须有个主键5、数据库和表的字符集统一使用UTF86、查询SQL尽量不要使用select *&#xff0c;而是具体字段7、避免在where子句中使用 or 来连接条件8、尽量使用数值替代字符串类型…

POI处理Excel (xlsx格式) 设置单元格格式为数值 且千分位分隔 保留两位小数

背景 某公司导出的一个Excel 其中有三列数据 是数字 但是导出后 实际上格式为 数值形式的字符串 客户要求这三列的格式改为 数值格式 且千分位分隔 保留两位小数 分析原因 先看导出用到了什么工具 查看源码发现 导出 使用了 EasyExcel 立马想到 一般情况下导出实体的字段类…

layui框架学习(7:选项卡样式)

选项卡&#xff08;Tab&#xff09;在C/S程序和B/S程序中应用比较广泛&#xff0c;CSDN中也能看到选项卡的身影&#xff08;如下图所示&#xff09;。Layui内置多种Tab风格&#xff0c;支持删除选项卡、并提供响应式支持。Layui官方教程中主要介绍了选项卡相关的样式设置&#…