JS-23-原型继承

一、JS的原型继承

在传统的基于Class的语言如Java、C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass。

但是,JavaScript由于采用原型继承,根本不存在Class这种类型。

但是办法还是有的。我们先回顾Student构造函数:

function Student(props) {this.name = props.name || 'Unnamed';
}Student.prototype.hello = function () {alert('Hello, ' + this.name + '!');
}

以及Student的原型链:

现在,我们要基于Student扩展出PrimaryStudent。

1、先定义出PrimaryStudent

function PrimaryStudent(props) {// 调用Student构造函数,绑定this变量:Student.call(this, props);this.grade = props.grade || 1;
}

但是,调用了Student构造函数不等于继承了StudentPrimaryStudent创建的对象的原型是:

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

必须想办法把原型链修改为:

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

这样就有继承关系了。新的基于PrimaryStudent创建的对象不但能调用PrimaryStudent.prototype定义的方法,也可以调用Student.prototype定义的方法。

错误的方式:

PrimaryStudent.prototype = Student.prototype;

如果这样的话,PrimaryStudentStudent共享一个原型对象,那还要定义PrimaryStudent干啥?

我们必须借助一个中间对象来实现正确的原型链,这个中间对象的原型要指向Student.prototype。为了实现这一点,参考道爷(就是发明JSON的那个道格拉斯)的代码,中间对象可以用一个空函数F来实现:

        // PrimaryStudent构造函数:function PrimaryStudent(props) {Student.call(this, props);this.grade = props.grade || 1;}// 空函数F:function F() {}// 把F的原型指向Student.prototype:F.prototype = Student.prototype;// 把PrimaryStudent的原型指向一个新的F对象,F对象的原型正好指向Student.prototype:PrimaryStudent.prototype = new F();// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:PrimaryStudent.prototype.constructor = PrimaryStudent;// 继续在PrimaryStudent原型(就是new F()对象)上定义方法:PrimaryStudent.prototype.getGrade = function () {return this.grade;};PrimaryStudent.prototype.run = function (){console.log(this.name + ' is running.....')}// 创建xiaoming:var xiaoming = new PrimaryStudent({name: '小明',grade: 2});console.log(xiaoming.name); // '小明'console.log(xiaoming.grade); // 2console.log(xiaoming.getGrade());// 2console.log(xiaoming.run());// '小明 is running'

验证原型:

xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true// 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

新的原型链:

 

如果把继承这个动作用一个inherits()函数封装起来,还可以隐藏F的定义,并简化代码:

function inherits(Child, Parent) {var F = function () {};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;
}

此时,代码变成如下所示:

function Student(props) {this.name = props.name || 'Unnamed';
}Student.prototype.hello = function () {alert('Hello, ' + this.name + '!');
}function PrimaryStudent(props) {Student.call(this, props);this.grade = props.grade || 1;
}// 实现原型继承链:
inherits(PrimaryStudent, Student);// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {return this.grade;
};

二、小结

JavaScript的原型继承实现方式就是:

  1. 定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this;(PrimaryStudent)

  2. 借助中间函数F实现原型链继承,最好通过封装的inherits函数完成;

  3. 继续在新的构造函数的原型上定义新方法。

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

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

相关文章

手机真机连接USB调试adb不识别不显示和TCPIP连接问题

手机真机连接USB调试adb devices不显示设备和TCPIP连接 本文手机型号为NOVA 7 ,其他型号手机在开发人员模式打开等方式可能略有不同,需根据自己的手机型号修改。 文章目录 1. 打开和关闭开发者模式2. 真机USB连接调试adb不显示设备问题的若干解决方法3…

前端调试工具之Chrome Elements、Network、Sources、TimeLine调试

常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试工具。 打开 Google Chrome 浏览器&#xff0c…

Linux(centos) 安装GraalVM

文章目录 版权声明GraalVM 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明,所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用,并非商业用途。我在整理学习笔记的过程中尽力确保准确性&…

视频汇聚/安防监控/EasyCVR平台播放器EasyPlayer更新:新增【性能面板】

视频汇聚/安防监控/视频存储平台EasyCVR基于云边端架构,可以在复杂的网络环境中快速、灵活部署,平台视频能力丰富,可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云…

物联网行业中,我们如何选择数据库?

在当今数字化潮流中,我们面对的不仅是海量数据,更是时间的涟漪。从生产线的传感器到金融市场的交易记录,时间序列数据成为了理解事物演变和趋势的关键。在面对这样庞大而动态的数据流时,我们需要深入了解一种强大的工具——时序数…

素数的判断方法总结

目录 素数介绍 试除法 埃氏筛 欧拉筛 素数介绍 判断一个数n是不是素数:当时,用试除法;当时,试除法不够用,需要用高级算法。 试除法 把内的所有数去试除n,如果都不能整除,就是素数。 boo…

谷粒商城实战(008 缓存)

Java项目《谷粒商城》架构师级Java项目实战,对标阿里P6-P7,全网最强 总时长 104:45:00 共408P 此文章包含第151p-第p157的内容 简介 数据库承担落盘(持久化)工作 拿map做缓存 这种是本地缓存,会有一些问题 分布…

【嵌入式硬件】三极管伏安特性曲线-饱和区

1.三极管伏安特性 三极管工作电路如下图所示。 三极管伏安特性曲线 书本上的描述: 截止区:三极管工作在截止状态,当发射结的电压Ube 小于 导通电压(0.6V-0.7V),发射结没有导通;集电结处于反向偏置,没有放大作用。 放大区:三极管的发射极加正向电压(…

晨控RFID读写器与罗克韦尔PLC可编程逻辑控制器MODBUSTCP通讯说明

晨控RFID读写器与罗克韦尔PLC可编程逻辑控制器MODBUSTCP通讯说明 晨控RFID读写器系列是支持标准工业通讯协议 MODBUSTCP 的读卡器,方便用户集成到PLC等控制系统中。读卡器提供了网络 POE 供电和直流电源供电两种方式,确保用户在使用无 POE 供电功能的交换机时可采用…

vue3中怎么点击按钮就上传文件

<el-button text type"primary" click"importBillExcel(row)">导入账单</el-button> // 导入客户账单Excel表 const importBillExcel (row) > {let input document.createElement(input)input.type fileinput.accept .pdf, .png, .zip…

文本自动粘贴编辑器:支持自动粘贴并筛选手机号码,让信息处理更轻松

在信息时代的浪潮中&#xff0c;文本处理已成为我们日常工作与生活的重要组成部分。无论是商务沟通、社交互动还是个人事务处理&#xff0c;手机号码的筛选与粘贴都显得尤为关键。然而&#xff0c;传统的文本处理方式效率低下、易出错&#xff0c;已无法满足现代人的高效需求。…

Android Studio学习7——常用控件view

Android控件 双击shift键——>搜索想要找的文件 Ctrlshift回车——>补全“&#xff1b;”号 CtrlX——>删除一行&#xff0c;只需把鼠标放在那一行 windows自带字体

Set a Light 3D Studio:探索光影艺术的全新维度mac/win中文版

Set a Light 3D Studio 是一款领先的三维建模和渲染软件&#xff0c;它将设计师、艺术家和摄影师的创意想法转化为生动逼真的三维场景。这款软件以其强大的功能和直观的界面&#xff0c;成为行业内众多专业人士的首 选工具。 set.a.light 3D STUDIO中文版软件获取 在Set a Lig…

【HTML】标签学习(下.4)

&#xff08;Hello&#xff01;大家好哇&#xff0c;今天我们将继续学习HTML的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; &#xff08;续接【HTML】标签学习&#xff08;下.3&#xff09;&#xff09; 3.4.2 <label&g…

nodeJs 实现视频的转换(超详细教程)

前段时间拿到一个视频是4k的&#xff0c;没法播放&#xff0c;于是通过 node.js 和 ffmpeg 实现了视频的转换。在win10 系统下实现。 所需工具 node 16.19 直接安装 ffmpeg-5.1.1-essentials_build 解压后重名 ffmpeg 放到C盘 然后配置下环境变量 Git-2.42.0.2-64-bit 直接…

4款在线网页原型图设计软件推荐

与桌面端相比&#xff0c;在线网页原型设计软件的使用具有优势&#xff0c;因为在线网页原型设计软件在整个使用过程中不需要安装&#xff0c;在线网页原型设计软件在任何地方都没有限制。更重要的是&#xff0c;无论是现在使用的 Linux&#xff0c;在线网页原型设计软件在操作…

[C++]使用OpenCV去除面积较小的连通域

这是后期补充的部分&#xff0c;和前期的代码不太一样 效果图 源代码 //测试 void CCutImageVS2013Dlg::OnBnClickedTestButton1() {vector<vector<Point> > contours; //轮廓数组vector<Point2d> centers; //轮廓质心坐标 vector<vector<Point&…

day3| 从socket部分继续学习

package mainimport ("fmt""log""net/http""github.com/gorilla/websocket" )var UP websocket.Upgrader{/*握手时间缓冲区(包括写和读)缓冲池指定用于生成HTTP错误响应的函数对过来的请求进行校验指定服务器是否应尝试根据进行协商消…

RUST Rover 条件编译 异常处理

按官方处理发现异常 会报异常 error: failed to parse manifest at C:\Users\topma\RustroverProjects\untitled2\Cargo.toml 修改模式如下才能正常编译 网上说明 这样处理 [features] print-a [] print-b [] full ["print-a","print-b"]

Mybatis——一对多关联映射

一对多关联映射 一对多关联映射有两种方式&#xff0c;都用到了collection元素 以购物网站中用户和订单之间的一对多关系为例 collection集合的嵌套结果映射 创建两个实体类和映射接口 package org.example.demo;import lombok.Data;import java.util.List;Data public cla…