当前位置: 首页 > 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&…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

计算机系统结构复习-名词解释2

1.定向&#xff1a;在某条指令产生计算结果之前&#xff0c;其他指令并不真正立即需要该计算结果&#xff0c;如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方&#xff0c;那么就可以避免停顿。 2.多级存储层次&#xff1a;由若干个采用不同实现技术的存储…...