Javascript 如何实现继承?

news2024/11/24 13:09:36

简单来说

  • js 实现继承的方式有很多种,比如 原型链继承、借用构造函数继承、组合继承、寄生继承、寄生组合继承、ES6 新增的 extends 继承
  • 一般我开发中用的比较多的就是 原型链继承 还有 class 类函数继承。 其他的基本用得少,主要是平时看一些技术博客类文章了解过一些。

继承是什么?

继承(inheritance)是面向对象软件技术当中的一个概念。

如果一个类别 B“继承自”另一个类别 A,就把这个 B 称为“A 的子类”,而把 A 称为“B 的父类别”也可以称“A 是 B 的超类”

继承的优点: 不劳而获, 继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码

在子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能

虽然JavaScript并不是真正的面向对象语言,但它天生的灵活性,使应用场景更加丰富

JavaScript想实现继承的目的:重复利用另外一个对象的属性和方法。

常见的继承方式?

一.原型链继承

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

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

 上面代码看似没问题,实际存在潜在问题

var s1 = new Child2()
var s2 = new Child2()
s1.play.push(4)
console.log(s1.play, s2.play) // [1,2,3,4]

 改变s1play属性,会发现s2也跟着发生变化了,这是因为两个实例使用的是同一个原型对象,内存空间是共享的

二.构造函数继承(借助 call)

function Parent() {
  this.name = 'parent1'
}

Parent.prototype.getName = function () {
  return this.name
}

function Child() {
  Parent1.call(this)
  this.type = 'child'
}

let child = new Child()
console.log(child) // 没问题
console.log(child.getName()) // 会报错

可以看到,父类原型对象中一旦存在父类之前自己定义的方法,那么子类将无法继承这些方法

相比第一种原型链继承方式,父类的引用属性不会被共享,优化了第一种继承方式的弊端,但是只能继承父类的实例属性和方法,不能继承原型属性或者方法

三.组合继承

前面我们讲到两种继承方式,各有优缺点。组合继承则将前两种方式继承起来

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, s4.play) // 不互相影响
console.log(s3.getName()) // 正常输出'parent3'
console.log(s4.getName()) // 正常输出'parent3'

将 原型链 和 借用构造函数 的组合到一块。使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有自己的属性,这种方式看起来就没什么问题,方式一和方式二的问题都解决了,但是从上面代码我们也可以看到Parent3 执行了两次,造成了多构造一次的性能开销

四.原型式继承

主要借助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) // tom
console.log(person4.name === person4.getName()) // true
console.log(person5.name) // parent4
console.log(person4.friends) // ["p1", "p2", "p3","jerry","lucy"]
console.log(person5.friends) // ["p1", "p2", "p3","jerry","lucy"]

 这种继承方式的缺点也很明显,因为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()) // parent5
console.log(person5.getFriends()) // ["p1", "p2", "p3"]

 创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

六.寄生组合式继承

寄生组合式继承,借助解决普通对象的继承问题的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) //{friends:"child5",name:"child5",play:[1,2,3],__proto__:Parent6}
console.log(person6.getName()) // parent6
console.log(person6.getFriends()) // child5

可以看到 person6 打印出来的结果,属性都得到了继承,方法也没问题

@使用ES6 中的extends关键字直接实现 JavaScript的继承

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工具进行转换,我们会发现extends实际采用的也是寄生组合继承方式,因此也证明了这种方式是较优的解决继承的方式

总结:

 通过Object.create 来划分不同的继承方式,最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式,而 extends 的语法糖和寄生组合继承的方式基本类似

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

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

相关文章

MySql 知识大汇总

目录 一、常用的数据类型 二、数据库索引 什么是数据库索引 索引的作用 索引是否越多越好 索引的分类 三、sql语句 插入 更新 删除 查询 普通查询 子查询 连表查询 四、常用的一些函数 group by 分组 order by 排序 HAVING 子句 根据条件…

5、传输层UDP28

传输层:负责俩端之间的数据传输(TCP&UDP) UDP协议:协议格式(协议实现)、协议特性、编程影响 一、协议格式(协议实现) 面试:传输层的数据结构是什么? 就是…

1.计算机系统概述

1.1 计算机发展历程 1.1.1计算机硬件的发展 1.逻辑元件的四代变化: 电子管->晶体管->中小规模集成电路->超大规模集成电路 第四代计算机时代产生了微处理器,是微型计算机发展的标志。 2. 计算机元件的更新换代 如半导体存储器、微处理器都在不断…

IDEA配置maven国内源

这里写目录标题 前言注意第一步 前言 为什么要配置maven国内源, 因为如果不配置国内源,一个是依赖加载速度过慢, 另一个是可能会导致创建spring / Springboot创建失败,或者是在maven项目中引入jar包失败,从而导致项目运行失败 注意 配置要配置俩次 第一步 选择settings …

【复习8-9天内容】【我们一起60天准备考研算法面试(大全)-第十三天 13/60】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客,如有问题交流,欢迎评论区留言,一定尽快回复!(大家可以去看我的专栏,是所有文章的目录)   文章字体风格: 红色文字表示&#…

数字检测Y8S

【免费】数字检测Y8S,只需要OPENCV-深度学习文档类资源-CSDN文库 采用YOLOV8训练,得到PT模型,然后直接转ONNX,使用OPENCV的DNN,不需要其他依赖,支持C/PYTHON

【CodeWhisperer】 亚马逊AI辅助代码生成工具

Amazon CodeWhisperer 定价 Amazon CodeWhisperer 直接在集成式开发环境 (IDE) 中为开发人员提供实时代码建议。个人开发人员可以免费使用 CodeWhisperer。组织为使用 CodeWhisperer 按“每位用户每月”支付固定的订阅费,无需预付费用或长期承诺。 CodeWhisperer 提…

Docker安装tomcat

docker hub上面查找tomcat镜像 docker search tomcat 从docker hub上拉取tomcat镜像到本地 docker pull tomcat docker images查看是否有拉取到的tomcat docker images 使用tomcat镜像创建容器实例(也叫运行镜像) docker run -d -p 8080:8080 tomcat 说明 -p 小写,…

GPipe:微批量流水线并行

论文标题:GPipe: Easy Scaling with Micro-Batch Pipeline Parallelism论文链接:https://arxiv.org/abs/1811.06965论文来源:Google 一、概述 如下图所示,近过去十年中,由于开发了促进神经网络有效容量扩大的方法&…

【Unity3D】伽马校正

1 伽马相关概念 1.1 人眼对亮度变化的感知 人眼对亮度变化的感知不是线性的,如下图,人眼对亮区的亮度变化不太敏感,对暗区的亮度变化较敏感。另外,我们可以想象一下,在一个黑暗的房间里,由 1 根蜡烛到 2 根…

【改进粒子群优化算法】基于惯性权重和学习因子动态调整的粒子群算法【期刊论文复现】(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

面试题之MySQL事物的特性

在关系性数据库管理系统配置,一个逻辑工作要成为事物,必须要满足4个特性,即所谓的ACID:原子性(Atomicity),一致性(Consistency)、隔离性(lsolation)和持久性(Durability)。 原子性: 原子性:事物作为一个整体被执行,包含在其中对…

Redis - 为什么我要来安利你学习 Redis ?

目录 前言 一、Redis 的特性(优点) 1. Redis 是在内存中存储数据的 2.可编程性 3.可扩展性 4.持久化 5.支持集群 6.高可用 二、Redis 为什么快? 三、 Redis 使用场景 优势场景 1.将 Redis 当作数据库 2.作为缓存和存储 session …

【数据分享】1929-2022年全球站点的逐日平均压力数据(Shp\Excel\12000个站点)

气象数据是在各项研究中都经常使用的数据,气象指标包括气温、风速、降水、能见度等指标,说到气象数据,最详细的气象数据是具体到气象监测站点的数据! 对于具体到监测站点的气象数据,之前我们分享过1929-2022年全球气象…

【LeetCode每日一题合集】2023.7.10-2023.7.16(dfs 换根DP)

文章目录 16. 最接近的三数之和排序 双指针 1911. 最大子序列交替和解法——动态规划 2544. 交替数字和(简单模拟)931. 下降路径最小和(线性DP)979. 在二叉树中分配硬币⭐⭐⭐⭐⭐(dfs)算法分析补充&#…

PWM呼吸灯+流水灯设计

完成任务: 在流水灯基础上加入pwm呼吸灯设计,关于pwm呼吸灯设计可以看博主上一篇博客PWM呼吸灯设计 ,开发板上灯每两秒进行一次切换,每一个的亮灭间隔为一秒。 代码参考: module pwm_led_change(input wire …

软件测试人员和程序开发人员是死对头吗?

这两天闲来无事刷知乎,看到有些朋友问到关于测试与开发的关系,在这里想和大家稍微来聊一聊这个事儿。 有的人说呢,测试和开发是死对头;也有人说测试和开发是处在对立面的;还有人说测试与开发两者都不能互相理解。当然&…

再战算法-奋进

再战算法-奋进 算法入门痛苦经历总结收获 算法入门 在大学期间我直至觉得【算法】是很重要的一项,最开始接触的是c语言,算是第一门接触的,给了我很大的惊喜🥰,大二下的时候开始接触到Java语言,通过Java的入…

【C++进阶】C++11基础

文章目录 一、C11简介二、统一的列表初始化1. {}初始化2、std::initializer_list 三、 声明1.auto2. decltype3.nullptr 三、范围for 一、C11简介 在2003年C标准委员会曾经提交了一份技术勘误表(简称TC1),使得C03这个名字已经取代了C98称为C…

Python3实现画小提琴图(包含分组)

说在前面 Python如何画一个小提琴图呢?先看下必备的数据集合(自己构建,样式参考) 默认必有X列、Y列(数值),画分组需要包含分组的列group等数据参数准备 可以参考下面的数据样例: 除此之外,对于画图使用的参数,提前准备的知识如下: sns.violinplot所必备的参数…