当前位置: 首页 > news >正文

Javascript借用原型对象继承父类型方法

借用原型对象继承父类型方法

目的: 儿子继承父类属性和方法,父类之后新增的方法不会被儿子继承。

前言:

先理解一个问题:

Son.prototype = Father.prototype; 这一操作相当于把Son的原型对象指向Father。

意味着Son的prototype的地址与Father一致,如果我给Son新增函数,那么Father也会同步新增。

在这里插入图片描述

具体代码:

function Father(uname, age) {this.uname = uname;this.age = age;
}
Father.prototype.money = function() {console.log(100000);};
function Son(uname, age, score) {Father.call(this, uname, age);this.score = score;
}
Son.prototype = Father.prototype;let son = new Son('刘德华', 18, 100);
console.log(Son.prototype);
console.log(Father.prototype);

结果:

在这里插入图片描述

分析:

我们的初衷是,儿子继承父类属性和方法,父类之后新增的方法不会被儿子继承。

很明显儿子和父亲的成员函数和属性都一致,这是由于儿子和父类地址一致导致的。


解决方案:

Son.prototype = new Father();

首先用new创建一个父类的实例对象,然后让Son的原型对象指向这个新创建的对象即可。

在这里插入图片描述

从下往上理解:

Son原型对象:指向Father实例对象,继承Father实例对象的属性和方法

Father实例对象:含有__proto__属性,可以使用Father原型对象的新增的方法

Father原型对象:可以新增函数

此时,如果Son新增函数,由于Son和Father实例对象地址一致,只会影响到Father实例对象,而不会影响到Father原型对象上。


总结:

将子类所共享的方法提取出来,让子类的 prototype 原型对象 = new 父类()

通过父类实例化对象,开辟额外空间,就不会影响原来父类的原型对象。

有一说一,采用了深拷贝的思想。

  • Code:

    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {// this 指向父构造函数的对象实例this.uname = uname;this.age = age;
    }
    Father.prototype.money = function() {console.log(100000);};
    // 2 .子构造函数 
    function Son(uname, age, score) {// this 指向子构造函数的对象实例Father.call(this, uname, age);this.score = score;
    }
    // Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
    Son.prototype = new Father();
    // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
    Son.prototype.constructor = Son;
    // 这个是子构造函数专门的方法
    Son.prototype.exam = function() {console.log('孩子要考试');}
    var son = new Son('刘德华', 18, 100);
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);
    

参考:

可以看这两集

https://www.bilibili.com/video/BV1DY41177dM?p=37&spm_id_from=pageDriver&vd_source=30a98e03cd5a7bbfaeb4416fc48542e2

相关文章:

Javascript借用原型对象继承父类型方法

借用原型对象继承父类型方法 目的: 儿子继承父类属性和方法,父类之后新增的方法不会被儿子继承。 前言: 先理解一个问题: Son.prototype Father.prototype; 这一操作相当于把Son的原型对象指向Father。 意味着Son的prototype的地址与Fa…...

你不会工作1年了连枚举都还不知道吧?

💗推荐阅读文章💗 🌸JavaSE系列🌸👉1️⃣《JavaSE系列教程》🌺MySQL系列🌺👉2️⃣《MySQL系列教程》🍀JavaWeb系列🍀👉3️⃣《JavaWeb系列教程》…...

ks通过恶意低绩效来变相裁员(五)绩效申诉就是「小六自证吃了一碗凉粉」

目录 一、小六吃了一碗凉粉 二、给你差绩效 公司告诉你可以绩效申诉 1、公司的实际目的是啥 2、你一旦自证,就掉入了陷阱 三、谁主张谁举证——让公司证明它绩效考核的客观性和公平性 四、针对公司的流氓恶意绩效行为,还有其他招吗 五、当公司用各…...

一阶低通滤波介绍及simulink模型

一阶低通滤波 背景介绍 低通滤波是一种过滤方式,规定低频信号能正常通过,而超过设定临界值的高频信号则被阻隔、减弱。低通滤波可以简单的认为:设定一个频率点,当信号频率高于这个频率时不能通过,在数字信号中&#…...

三十三、MongoDB PHP 扩展

PHP 语言访问 MongoDB 数据库需要使用 mongo 扩展 mongo 扩展不是 PHP 官方内置的扩展,需要开发者自己手动安装和配置 本章我们将学习如何在 Linux、Window、Mac 平台上安装 mongo 扩展 Linux 上安装 PHP MongoDB 扩展 通过 pecl 来安装 在 Linux 系统上可以通…...

2D图像处理:九点标定_上(机械手轴线与法兰轴线重合)(附源码)

文章目录 1. 九点标定2. 九点标定流程2.1 机械手轴线与法兰轴线重合代码实现1. 九点标定 在2D视觉抓取项目中,如果想要让机械手准确的抓取到工件,前提是需要知道机械手应该移动到哪里(位姿)。而移动到哪里(位姿)的获取就需要对相机和机械手进行标定。因此,九点标定(2D视…...

2023最新C++面经(一):vector内存预分配,左值引用和右值引用,move语义

文章目录零、前言一、在C中,往vector插入1000个数字,怎么做能保证性能最高二、在vector中对10000个数字删除偶数位置的数,怎么做保证性能较高三、malloc用delete会出现什么问题四、weak_ptr解决的是什么问题,lock返回的对象可以直接使用吗五、…...

【C语言经典例题】调整数组使奇数全部都位于偶数前面

目录 一、题目要求 二、解题思路 分步解析 从前往后找 从后往前找 交换 三、完整代码演示 一、题目要求 输入一个整数数组,实现一个函数, 来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分, 所有偶数位于数组的后半…...

C++经典20题型,满满知识,看这一篇就够了(含答案)

今天找了20道c的经典题型,看这一篇就够了,全是干货 目录 1、题目:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总…...

卷积神经网络CNN之ZF Net网络模型详解(理论篇)

1.背景 2. ZF Net模型结构 3. 改进优缺点 一、背景 ZF Net是用作者的名字命名的,Matthew D.Zeiler 和 Rob Fergus (纽约大学),2013年撰写的论文; 论文原网址https://arxiv.org/abs/1311.2901 论文名:Vis…...

Vue 3.0 响应性 基础 【Vue3 从零开始】

#声明响应式状态 要为 JavaScript 对象创建响应式状态,可以使用 reactive 方法: import { reactive } from vue// 响应式状态const state reactive({count: 0}) reactive 相当于 Vue 2.x 中的 Vue.observable() API ,为避免与 RxJS 中的 ob…...

flex布局方式让最后一个(或第二个...n)元素居右显示

<div class"round"> <div class"income">收入</div> <div class"center"> <img style"width: 12px" src"../../img/big/up.png"> </div> <div class"rg"> <span cl…...

【Python语言基础】——Python MySQL Order By

Python语言基础——Python MySQL Order By 文章目录 Python语言基础——Python MySQL Order By一、Python MySQL Order By一、Python MySQL Order By 结果排序 请使用 ORDER BY 语句按升序或降序对结果进行排序。 ORDER BY 关键字默认按升序对结果进行排序。若要按降序对结果进…...

自然数学的哲学原理--复数理论的扩展

自然数学的哲学原理--复数理论的扩展 2023-03-05 10:27:12 自然数学的哲学原理--复数理论的扩展 一维&#xff1a;线&#xff0c;实数 二维&#xff1a;平面 三维&#xff1a;立体 四维&#xff1a;相对论时空 复数&#xff0c;以一个数对形式表示&#xff0c;实现了复平面的…...

tsconfig.json中的一些配置

compilerOptions 编译选项是配置文件中非常重要也比较复杂的配置选项 target&#xff1a;设置ts代码编译的目标版本 可选值&#xff1a; ES3&#xff08;默认&#xff09;、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、 ESNext 示例&#xff1a; &quo…...

Spark调优总结

下面是基于官方优化建议&#xff0c;加上自己的一些理解整理。官方地址&#xff1a;https://spark.apache.org/docs/2.4.8/tuning.html 任务并行度 Spark会根据每个文件的大小自动设置运行“map”任务的数量&#xff0c;而对于分布式的“reduce”操作&#xff0c;例如groupBy…...

4.创建和加入通道相关(network.sh脚本createChannel函数分析)[fabric2.2]

fabric的test-network例子有一个orderer组织、两个peer组织、每个组织一个节点&#xff0c;只有系统通道&#xff08;system-channel&#xff09;&#xff0c;没有其他应用通道。我们可以使用./network.sh createChannel命令来创建一个名为mychannel的应用通道。 一、主要概念 …...

若依学习(前后端分离版)——自定义注解@Log(如何自定义注解,实现aop)

如何自定义注解 aop的基本知识与应用 若依对用户的一些更新删除等敏感操作操作进行了日志记录 注解定义和切面处理的项目位置 第一步&#xff1a;自定义注解log 定义了注解的相关信息。这里定义的属性可以在使用时加以定义 注解Target和Retention的作用 第二步切面逻辑…...

防止暴力破解ssh的四种方法

一. 方法介绍 防止暴力破解的四种方法&#xff1a; 1 密码要写的足够的复杂&#xff0c;通常建议将密码写16位&#xff0c;并且无连贯的数字或者字母&#xff1b;当然也可以固定一个时间修改一次密码&#xff0c;推荐是一个月修改一次会稳妥一些2 修改ssh的端口号&#xff0c;…...

jsp试卷分析管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP试卷分析管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…...

实战指南:借鉴vmware官网混合云方案,用快马平台生成高可用应用部署模板

今天在VMware官网上研究混合云方案时&#xff0c;发现他们的企业级架构设计特别值得借鉴。正好最近在用InsCode(快马)平台做项目部署&#xff0c;就尝试把官网的混合云方案转化成可落地的模板。整个过程比想象中顺利&#xff0c;分享下我的实战经验。 架构设计思路 VMware官网…...

实战指南|OpenWrt磁盘扩容全流程解析与避坑技巧

1. 为什么需要给OpenWrt扩容&#xff1f; 很多朋友第一次接触OpenWrt时都会遇到一个尴尬的问题&#xff1a;系统默认分配的存储空间太小了。我自己刚开始用OpenWrt时也踩过这个坑&#xff0c;当时想装个Docker跑点服务&#xff0c;结果发现连最基本的镜像都拉不下来。这就像给…...

从理论到实践:基于EKF与1RC模型的锂离子电池SOC在线估计与Simulink仿真

1. 锂离子电池SOC估计为什么这么重要&#xff1f; 如果你用过电动车或者手机&#xff0c;肯定遇到过电量显示不准的情况。明明显示还有30%电量&#xff0c;结果突然关机&#xff1b;或者充到80%就再也充不进去了。这些问题的核心&#xff0c;都跟电池的荷电状态&#xff08;SO…...

8款AI论文写作工具(含爱毕业aibiye)推荐及新手快速上手方法

人工智能技术在学术研究领域的深度整合为论文撰写流程带来了革命性变革&#xff0c;通过8款核心智能工具的协同应用——包括文献智能分析系统、自动化内容生成引擎以及文本精准优化平台——研究者能够实现从数据挖掘到学术表达的全程智能化&#xff0c;显著提升文献处理效率与学…...

Inconsolata字体深度解析:从代码美学到专业排版的完整方案

Inconsolata字体深度解析&#xff1a;从代码美学到专业排版的完整方案 【免费下载链接】Inconsolata Development repo of Inconsolata Fonts by Raph Levien 项目地址: https://gitcode.com/gh_mirrors/in/Inconsolata 在编程世界中&#xff0c;字体的选择远不止是审美…...

Adobe软件非正版弹窗终极解决方案:PS/Ai/PR/AE禁用提示一键清除指南

1. Adobe弹窗问题的根源分析 最近不少朋友打开Photoshop、Illustrator这些Adobe软件时&#xff0c;突然跳出一个烦人的提示框&#xff1a;"Your non-genuine Adobe app will be disabled soon"。这个警告不仅影响使用体验&#xff0c;严重时还会导致软件直接罢工。作…...

Anaconda环境下Spyder升级保姆级教程(附常见问题解决方案)

Anaconda环境下Spyder升级全攻略与疑难排解手册 在Python数据科学领域&#xff0c;Spyder作为专为科学计算设计的集成开发环境(IDE)&#xff0c;凭借其变量查看器、交互式控制台和强大的调试功能&#xff0c;已成为众多研究人员的首选工具。而Anaconda作为Python科学计算的瑞士…...

Ascend CANN平台避坑指南:从算子开发到模型部署的5个关键陷阱

Ascend CANN平台避坑指南&#xff1a;从算子开发到模型部署的5个关键陷阱 在AI加速器领域&#xff0c;昇腾NPU凭借其独特的达芬奇架构和CANN软件栈&#xff0c;正在成为越来越多企业级AI部署的首选方案。然而在实际工程落地过程中&#xff0c;从算子开发到模型部署的完整链路里…...

解密Wallpaper Engine资源宝库:RePKG工具完全实战指南

解密Wallpaper Engine资源宝库&#xff1a;RePKG工具完全实战指南 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg RePKG是一款专为Wallpaper Engine设计的开源资源处理工具&#xf…...

Python打包神器大PK:Nuitka vs PyInstaller,谁才是你的菜?(附实测数据)

Python打包工具深度评测&#xff1a;Nuitka与PyInstaller的终极对决 当开发者需要将Python项目分发给没有Python环境的用户时&#xff0c;打包工具的选择往往成为关键决策。本文将深入分析两大主流工具Nuitka和PyInstaller在多个维度的表现&#xff0c;帮助开发者根据项目需求做…...