javascript中的继承

基本术语

本文中,proto === [[Prototype]]

原型链

基本思想

  1. 构造函数生成的对象有一个指针(proto)指向构造函数的原型。
  2. 如果将构造函数1的原型指向另一个构造函数2的实例,则构造函数1的实例__proto__.proto 指向了构造函数2的原型。原型2和实例1之间构成了一条原型。
function Super() {};
function Sub() {};
Super.prototype.sayHi = function () { console.log('hi') };
Sub.prototype = new Super();const supInstance1 = new Sub();
supInstance1.sayHi(); // hi

缺点

  1. Sub.prototype.constructor 被改变。
  2. Sub.prototype = new Sub(),new的过程可能会有副作用。

盗用构造函数(经典继承)

基本思想

  1. 在new一个构造函数1的时候,通过在构造函数1中调用另一个构造函数2来实现继承。
  2. 通过调用构造函数2,将构造函数2中的实例属性复制到构造函数1的实例中。
function Car(wheels) {this.wheels = wheels;
}function ElectricCar(wheels, type) {Cat.call(this, wheels);this.type = type;
}

缺点

  1. 子类的实例不能访问父类原型上的方法。
  2. 必须在构造函数中定义方法,因此函数(构造函数1)不能重用。

组合继承(伪经典继承)

基本思想

  1. 将子类原型指向父类实例,通过原型链来实现子类继承父类原型上的方法。
  2. 通过盗用构造函数来继承实例的属性。
function Super(title) {this.title = title;
}
Super.prototype.sayHi = function () {console.log(this.title, " <- Super title");
};function Sub(superTitle, subTitle) {Super.call(this, superTitle);this.subTitlte = subTitle;
}Sub.prototype = new Super();const subInstance = new Sub("superTitle in instance", "subTitle in instance");subInstance.sayHi(); // ****subtitle in instance  <- this title****/* subInstance结构类型
**{"title": "superTitle in instance","subTitlte": "subTitle in instance",[[Prototype]]: Super
}--- 在[[Prototype]]:Super中
--- Super的结构类型{title: undefined,[[Prototype]]: Object,
}**
*/

缺点

  1. 在构造函数2的原型中,有无用变量title:undefined
  2. 在进行原型链的链接时,会执行new Super() 过程,如果构造函数Super是一个有副作用的函数,会有不可预知的问题。(两次调用Super函数)
  3. 子类的原型的constructor属性指向丢失。

原型式继承

基本思想

对象间构造原型链实现属性的共享。

实现

es5的Object.create函数

// 返回一个对象,对象.__proto__ 指向 o
function objectCreate(o) {function F() {};F.prototype = o;return new F();
}

寄生式继承

基本思想

  1. 通过工厂模式创建新对象,构造函数中通过原型式继承来获取目标对象的能力。
function createSub(originObject) {const newObject = Object.create(originObject);newObject.sayHi = function() { console.log('hi') };return newObject;
}const person = { name: '张三',friends: ['李四', '赵武', '甲一']
};const personA = createSub(person);
personA.sayHi();

优缺点

???感觉没有使用的场景

寄生式组合继承(目前比较完美的解决方案)

基本思想

  1. 重写子构造函数的原型,将构造函数原型的[[prototype]]指向从默认Object改为父构造函数的原型。实现原型属性的继承。
  2. 在子构造函数调用父构造函数,实现实例属性的复用。
function Super(name) {this.name = name;
}
Super.prototype.sayHi = function() { console.log(`hi this is super and name is ${this.name}`)};function Sub(name, age) {Super.call(this, name);this.age = age;
}Sub.prototype = Object.create(Super.prototype, {constructor: {value: Sub,enumerable: false,writable: true,configurable: true,},
});
// 这里同样可以用es6中的 setPrototypeOf 来设置原型链的链接Sub.prototype.sayAge = function () { console.log(`the age of ${this.name} is ${this.age}`); }const subInstance = new Sub('Sub instance', 12);subInstance.sayHi(); // hi this is super and name is Sub instance
subInstance.sayAge(); // **the age of Sub instance is 12**

优缺点

  1. 功能上没有缺点
  2. 实现起来冗长

es6的继承

extends关键字

es6的继承本质上是es5继承的语法糖。

// 可以实现和寄生式组合继承完全相同的效果
class Super {constructor(name) {this.name = name;}sayHi() {console.log(`hi this is super and name is ${this.name}`)}
}class Sub extends Super {constructor(name,  age) {super(name);this.age = age;}sayAge() {console.log(`the age of ${this.name} is ${this.age}`)}}const subInstance = new Sub('Sub instance', 12);subInstance.sayHi(); // hi this is super and name is Sub instance
subInstance.sayAge(); // **the age of Sub instance is 12**参考数据:
- [1] [你不知道的JavaScript]
- [2] [JavaScript高级程序设计]
- [3] [[mdn](https://developer.mozilla.org/)](https://developer.mozilla.org/)

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

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

相关文章

线性表——设计一个高效算法,将顺序表L的所有元素逆置,要求算法的空间复杂度为O(1)。

题目&#xff1a;设计一个高效算法&#xff0c;将顺序表L的所有元素逆置&#xff0c;要求算法的空间复杂度为O(1)。 算法思想&#xff1a;扫描顺序表的L的前半部分元素&#xff0c;对于元素L.data[i](0<i<L.length/2)&#xff0c;将其与后半部分的对应元素L.data[L.lengt…

python自动化测试平台开发:自动化测试平台简介

一.测试平台简介 为什么需要测试平台 已有的开源测试平台不能满足需要&#xff0c;不要轻易造轮子 需要公司级别的定制 需要整合公司内部的多套平台 例子&#xff1a;DevOps平台、精准化测试平台、质量监控平台等等 常见的测试平台开发模式 大一统模式&#xff08;适合简单的…

linux find命令搜索日志内容

linux find命令搜索日志内容 查询服务器log日志 find /opt/logs/ -name "filename.log" | xargs grep -a "这里是要查询的字符"加上-a 是为了不报查出 binary 的错 服务器会返回 包含所查字符的整行日志信息

从瀑布模式到水母模式:ChatGPT如何赋能软件研发全流程【文末送书五本】

从瀑布模式到水母模式&#xff1a;ChatGPT如何赋能软件研发全流程 前言内容简介购买链接作者简介专家推荐读者对象参与方式往期赠书回 &#x1f3d8;️&#x1f3d8;️个人简介&#xff1a;以山河作礼。 &#x1f396;️&#x1f396;️:Python领域新星创作者&#xff0c;CSDN实…

【C】关于动态内存的试题及解析

目录 第1题&#xff1a; 第2题&#xff1a; 第3题&#xff1a; 第4题&#xff1a; 第5题&#xff1a; 在学习了关于动态开辟内存的相关知识后&#xff0c;下面是一些涉及到动态开辟内存程序的试题及解析&#xff08;试题部分来自《高质量的C/C编程》、笔试题&#xff09;。 第1…

(1)(1.9) HC-SR04声纳

文章目录 前言 1 连接到自动驾驶仪 2 参数说明 前言 HC-SR04 声纳是一种价格低廉但量程很短&#xff08;最远只有 2m&#xff09;的测距仪&#xff0c;主要设计用于室内&#xff0c;但也成功地在室外的 Copter 上使用过。极短的测距范围使其用途有限。 &#xff01;Warning…

移远通信5G RedCap模组拿下首个中国移动5G物联网开放实验室5G及轻量化产品能力认证

10月21日&#xff0c;在2023世界物联网博览会期间&#xff0c;中国移动举办了以“智融万物 创见未来”为主题的物联网开发者大会暨物联网产业论坛。作为中国移动在物联网领域重要的合作伙伴&#xff0c;移远通信应邀参加论坛。 随着千行百业数智化进程的不断加速&#xff0c;5G…

酷开科技依托酷开系统推动家庭智能化加速发展

为什么越来越多的人会选择智能家居&#xff1f;因为智能家居的出现&#xff0c;大大方便了我们的生活&#xff0c;为生活提供便利舒适的体验&#xff1b;就如同洗衣机与洗碗机解放了我们的双手是一样的道理&#xff0c;智能家居是在生活的方方面面为我们提供更加便利化的可能性…

java代码审计-换行符CRLF注入

CRLF 的缩写是指回车和换行操作&#xff0c;其中 CR 为 ASCII 中的第 13 个字符&#xff0c;也 写作 \r , LF 是 ASCII 中的第 10 个字符&#xff0c;也写作 \n &#xff0c;因此 CRLF 一般翻译为回车换行注入漏洞。 什么是CRLF注入漏洞? CRLF 即【回车\r换行\n】的简…

找游戏外包开发游戏,有哪些好处呢?

游戏外包开发是将游戏开发的一部分或全部工作交给专业的外部开发团队或公司完成的做法。这种方法有许多潜在的好处&#xff0c;包括&#xff1a; 降低成本&#xff1a;游戏外包通常可以降低游戏开发成本&#xff0c;因为外包开发公司通常可以提供更具竞争力的价格。这是因为它…

「译文」深入了解Kubernetes和Nomad

&#x1f449;️原文链接: https://www.cncf.io/blog/2023/10/23/introduction-a-closer-look-at-kubernetes-and-nomad/ ✍️作者: Rob Newsome &#x1f4dd;Description: stack.io 产品管理主管 Rob Newsome 的特邀文章 在容器编排领域&#xff0c;Kubernetes 和 Nomad 都是…

SpringMVC(下)

1、拦截器&#xff1a; 1、拦截器的配置: SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor <!--配置拦截器--><mvc:interceptors><!--对所有的请求进行拦截--><!--<bean class"com.songzhishu.m…

【2023CANN训练营第二季】——通过一份入门级算子开发代码了解Ascend C算子开发流程

本次博客讲解的代码是Gitee代码仓的Ascend C加法算子开发代码&#xff0c;代码地址为&#xff1a; quick-start 打开Add文件&#xff0c;可以看到文件结构如下&#xff1a; 其中add_custom.cpp是算子开发的核心文件&#xff0c;包括了核函数的实现&#xff0c;展示了如何在Asc…

#力扣:LCP 01. 猜数字@FDDLC

LCP 01. 猜数字 - 力扣&#xff08;LeetCode&#xff09; 一、Java class Solution {public int game(int[] guess, int[] answer) {int cnt0;for(int i0;i<3;i){if(guess[i]answer[i])cnt;}return cnt;} }

Spring Cloud之负载均衡与服务调用(Ribbon)

目录 Ribbon 简介 负载均衡 简介 负载均衡方式 服务端负载均衡 工作原理 特点 客户端负载均衡 工作原理 特点 对比 实现 负载均衡策略 切换负载均衡策略 定制负载均衡策略 超时与重试 单个服务配置 全局配置 服务调用 示例 Ribbon 简介 Ribbon 是 Netfli…

WEB使用百度地图展示某地地址

第一步 进入百度地图开发平台 百度地图开放平台 | 百度地图API SDK | 地图开发 第二步注册 获取AK秘钥&#xff0c;点击【创建应用】进入AK申请页面&#xff0c;填写应用名称&#xff0c;务必选择AK类型为“浏览器端”&#xff0c;JS API只支持浏览器端AK进行请求与访问 下面…

[Leetcode] 0104. 二叉树的最大深度

104. 二叉树的最大深度 题目描述 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例&#xff1a; 给定二叉树 [3,9,20,null,null,15,7]&#xff0c; 3/ \9 20/ \15 7返回它…

最小二乘法,可视化UI界面

import tkinter as tk import numpy as np import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg from pylab import mplmpl.rcParams[font.sans-serif] [FangSong] # 指定默认字体 mpl.rcParams[axes.unicode_minus] False …

雪糕冰淇淋经营配送小程序商城效果如何

雪糕冰淇淋是很多年轻人喜欢的食品之一&#xff0c;市面上的雪糕品牌类型众多&#xff0c;销售模式主要为厂家批发、经销商零售等&#xff0c;由于雪糕冰淇淋的易化性&#xff0c;很多用户会选择就近购买&#xff0c;但制作技术升级和长途冷藏技术下&#xff0c;网购成为另一种…

VB.NET 三层登录系统实战:从设计到部署全流程详解

目录 前言&#xff1a; 什么是三层 为什么要用到三层: 饭店→软件 理解: 过程: 1.三层包图: 2.数据库 3.三层项目 4.用户界面 5.添加引用 代码实现: Entity层 BLL层 DAL层 UI层 总结: 前言&#xff1a; 什么是三层 三层就是把各个功能模块划分为表示层&#…