在理构造函数的继承,这次用图说话。

2023-11-04

之前发过一篇关于继承的博客。不过,当时理解的一般,写的也不怎么样。这次重新回头理了一下关于构造函数的继承。

因为ES5没有类的概念。所以,才会有构造函数模拟类。首先让我们用一张图来理清楚构造函数、原型、实例三者之间的关系。

代码还有关系如下:

function Parent(){
       this.name = "A";
}
function.prototype.run = function(){
       console.log("run");
}
let parent = new Parent();

首先。
1》每一个构造函数都有一个原型。
2》原型上有一个constructor构造器,并且指向构造函数本身。
3》每个实例上都有一个__proto__链,指向实例的构造函数的原型。

4》name是私有属性。
5》run是公有属性(方法)
证据是
Parent.prototype.constructor === Parent;
parent.__proto__ === Parent.prototype;

 

这里说下继承的三种情况。

一、继承私有属性的继承。一般采用call或者apply的形式。如
function Child(){
       Parent.call(this);        //原理就是将Parent执行时候本该指向实例的this指向了Child。所以在Child实例化的时候,实例本身就具备了name的私有属性。
       this.age = 9;
}
let child = new Child();
console.log(child.name); //A 

 

二、集成公有属性。
这里经常见到一些错误的继承方式。
如:Child.prototype = Parent.prototype;  
let child1 = new Child();
child1.run();
这种确实能让child实例拿到Parent原型上的run方法。但是,这不叫继承因为这只是将Child的原型指向Parent的原型,二者共用。问题就是此时修改Child.prototype,就会造成Parent.prototype的变动。因为,此时二者就是一个空间。

那么如何正确的进行继承呢?

第一种:Child.prototype.__proto__ === Parent.prototype;这种就是给Child的原型加一个原型链,支持在自身原型找不到时会向上Parent上查找。他的等价写法是 Object.setPrototypeOf(Child.prototype,Parent.prototype);前面是ES5的写法,后面是ES6的写法。

第二种:Child.prototype = Object.create(Parent.prototype);
原理源码见MDN,地址是https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create


 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在理构造函数的继承,这次用图说话。 的相关文章

随机推荐

  • 设计分享

    目录 具体实现功能 设计介绍 51单片机简介 设计思路 设计内容 仿真图 protues8 7 程序 Keil5 具体实现功能 单片机控制8个LED实现从左到右的循环移动 设计介绍 51单片机简介 51单片是一种低功耗 高性能CMOS 8位
  • 2022年我的个人总结以及2023年的展望

    2022年公众号文章总共发布了 140篇 感谢大家的关注 在我的视角中2022这一年给我带来了了丰富的成长空间 再次认识到技术不只是技术代码 更多的还是思路和想法 技术的征途中学无止境 在有限的生命中我也在今年投入了许多生活的时间 2023
  • Spring 常用注解汇总和使用

    大家好 我是猿码 又是一个双休 春节马上就要到了 面对疫情的不确定性 你们今年能否回家呢 注解在 Java 开发中非常常见 随着 Spring 系列的框架逐渐占据主流 知道 Spring 都有哪些注解以及它们的作用至关重要 也某种程度的决定
  • 记录:vuecli按需引入elementui

    安装依赖 npm install babel plugin component D npm install babel preset env D 修改babel config js module exports presets vue cl
  • windows安装elasticsearch和kibana的安装配置教程

    Elasticsearch 和 Kibana 的最新稳定版本是 7 x 系列 而不是 8 9 1 版本 然而 我可以提供安装 Elasticsearch 7 x 和 Kibana 7 x 的配置教程 以下是安装 Elasticsearch
  • ORA-01034: ORACLE not available如何解决

    C Users 10299 gt sqlplus as sysdba SQL Plus Release 11 2 0 1 0 Production on 星期五 3月 24 11 32 56 2023 Copyright c 1982 20
  • 交叉编译grpc

    近期需要使用grpc在目标主机使用 参考了官方示例 大部分网上教程完成了本篇grpc的交叉编译 并对参考的教程做出了引用 文章目录 交叉编译grpc 1 安装交叉编译库 2 Pre requisites 2 1 ubuntu16 04升级g
  • SVN 检出操作

    上一章中 我们创建了版本库runoob01 URL为svn 192 168 0 1 runoob01 svn用户user01有读写权限 我们就可以通过这个URL在客户端对版本库进行检出操作 svn checkout http svn ser
  • 全国职业技能大赛云计算--高职组赛题卷⑤(私有云)

    全国职业技能大赛云计算 高职组赛题卷 私有云 第一场次题目 OpenStack平台部署与运维 任务1 基础运维任务 5分 任务2 OpenStack搭建任务 15分 任务3 OpenStack云平台运维 15分 任务4 OpenStack云
  • flutter 国内镜像https://storage.flutter-io.cn/ 用不了了 502 Bad Gateway trying to find package path at https

    今天 创建一个插件plugin 到pub get的时候爆了一堆超时 502 502 Bad Gateway trying to find package path at https pub flutter io cn 并一直在重试 结果是国
  • springboot3 多环境日志系统配置的问题,无法动态切换dev和prod,以及多环境日志系统的配置,和自动动态切换日志系统,include标签无法获取配置文件的active值

    今天做一个多环境的日志系统 yml文件里面写dev 就使用 dev的日志系统 如果是prod 就指定开发环境的日志系统 结果今天倒好 写是写了 无法解析 老是在后面加一个 is undefined的字符 我不知道这么回事 直到我用if和el
  • 2023.5.15.进度汇报(自用

    一 pyqt小应用 浏览器 1 创建菜单栏及主要分栏 2 创建工具栏 添加主要按钮 3 工具栏中添加地址栏
  • 项目辅助学习 Qt 5

    特点 Qt 5 是一个应用程序开发框架 可提供出色的用户体验并使用 Qt Widgets QML 甚至 Qt 3D 开发全功能应用程序 了解 Qt 框架 以及解决严重问题 例如链接 调试和多线程 所需的工具 内容 Qt 5 入门 项目基本结
  • [论文阅读] (30)李沐老师视频学习——3.研究的艺术·讲好故事和论点

    娜璋带你读论文 系列主要是督促自己阅读优秀论文及听取学术讲座 并分享给大家 希望您喜欢 由于作者的英文水平和学术能力不高 需要不断提升 所以还请大家批评指正 非常欢迎大家给我留言评论 学术路上期待与您前行 加油 前一篇带来李沐老师对论文写作
  • C共享内存读写结构体中的内容

    myshm h ifndef MYSHM H define MYSHM H define N 1 define PAGESIZE 4096 struct mydata int a int b endif shm write c includ
  • 企业微信网页应用开发 - 权限验证

    第一个坑就是权限验证 官方说明见 使用说明 企业微信API 企业微信的js文件非常迷 我找到的就有不同版本 3个 和npm包 2个 选择 但事实是 没有任何官方说明不同版本之间的关系 js文件不对 最常报的错就是XX is not a fu
  • LC-3 汇编语言 Nim游戏

    汇编T T 目录 题目描述 AC代码 思路分析 题目描述 Nim是一个简单的双人游戏 可能起源于中国 游戏中使用的计数器类型有很多种类 如石头 火柴 苹果等 游戏界面被划分为很多行 每行中有数量不等的计数器 行号 计数器数量 1 2 n 本
  • ACE_Message_Block功能和实现浅析

    ACE Message Block实现浅析 1 概述 ACE Message Block是ACE中很重要的一个类 和ACE框架中的重要模式的实现 如ACE Reactor ACE Proactor ACE Stream ACE Task都有
  • 近7成开发者无开源收入、最想操作系统开源、Java最受欢迎

    作者 何苗 责编 屠敏 出品 CSDN ID CSDNnews 2021年是中国开源发展的一座里程碑 这一年 开源被写进十四五规划 被国人熟知 80 90 企业业务都已构建在开源软件 开源项目之上 关于开源的影响力 以数字量化的形式呈现在世
  • 在理构造函数的继承,这次用图说话。

    之前发过一篇关于继承的博客 不过 当时理解的一般 写的也不怎么样 这次重新回头理了一下关于构造函数的继承 因为ES5没有类的概念 所以 才会有构造函数模拟类 首先让我们用一张图来理清楚构造函数 原型 实例三者之间的关系 代码还有关系如下 f