第一百一十八篇: JavaScript 原型链式继承
好家伙,好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记
1.原型链
原型链是JS实现"继承"的方案之一
ECMA-262把原型链定义为ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。
重温一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。
如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。
这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
};
function SubType() {
this.subproperty = false;
}
// 继承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
return this.subproperty;
};
let instance = new SubType();
console.log(instance.getSuperValue()); // true
这个例子中实现继承的关键,是SubType没有使用默认原型,而是将其替换成了一个新的对象。
这个新的对象恰好是SuperType的实例。
这样一来,SubType的实例不仅能从SuperType的实例中继承属性和方法,而且还与SuperType的原型挂上了钩。
于是我们可以来看看他们的关系网
实际上,原型链中还有一环。默认情况下,所有引用类型都继承自Object,这也是通过原型链实现的。完整的继承链
这样做有什么好处?
1.实现了继承
2.实例可以使用这个"链"上的所有内容,
特点:
1.就近原则,在读取实例上的属性时,首先会在实例上搜索这个属性。
如果没找到,则会继承搜索实例的原型。在通过原型链实现继承之后,搜索就可以继承向上,搜索原型的原型。
对属性和方法的搜索会一直持续到原型链的末端。
2.instanceof()方法和isPrototypeOf()方法
原型与实例的关系可以通过instanceof()方法和isPrototypeOf()方法来确定。
使用instanceof()方法检测实例的原型链中出现过相应的构造函数
使用isPrototypeOf()方法判断当前对象是否为另外一个对象的原型
function SuperType() {
this.property = true;
} function SubType() {
this.subproperty = false;
} // 继承SuperType
SubType.prototype = new SuperType(); let instance = new SubType(); console.log(instance instanceof Object);
console.log(instance instanceof SuperType);
console.log(instance instanceof SubType); console.log(Object.prototype.isPrototypeOf(instance));
console.log(SuperType.prototype.isPrototypeOf(instance));
console.log(SubType.prototype.isPrototypeOf(instance));
(全对)
3.方法覆盖
子类有时需要增加父类没有的方法 (不然为什么会需要子类...)
也可以进行方法覆盖
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
}; function SubType() {
this.subproperty = false;
}
// 继承SuperType
SubType.prototype = new SuperType();
//新方法
SubType.prototype.getSuperValue = function () {
return this.subproperty;
};
//覆盖已有的方法
SubType.prototype.getSuperValue = function () {
console.log("getSubValue()方法已被覆盖")
}; let instance = new SubType(); console.log(instance.getSuperValue()); // false
4.其它的继承方法
JavaScript继承(图解笔记) - 简书 (jianshu.com)
(写的挺好的,一篇直接看懂JS剩下的几种实现继承的方式)
第一百一十八篇: JavaScript 原型链式继承的更多相关文章
- JavaScript原型链和继承
1.概念 JavaScript并不提供一个class的实现,在ES6中提供class关键字,但是这个只是一个语法糖,JavaScript仍然是基于原型的.JavaScript只有一种结构:对象.每个对 ...
- [转]深入javascript——原型链和继承
在上一篇post中,介绍了原型的概念,了解到在javascript中构造函数.原型对象.实例三个好基友之间的关系:每一个构造函数都有一个“守护神”——原型对象,原型对象心里面也存着一个构造函数的“位置 ...
- JavaScript原型链与继承
最近学习了<Javascript高级程序设计>面向对象部分,结合书中的例子总结一下原型链和继承部分的内容. 创建对象 在Js当中没有类这个概念,当我们想要创建具有相同属性的对象的时候,有如 ...
- JavaScript原型链及继承
在JavaScript中,所有的东西都是对象,但是JavaScript中的面向对象并不是面向类,而是面向原型的,这是与C++.Java等面向对象语言的区别,比较容易混淆,因此把我自己学习的过程记录下来 ...
- 白话JavaScript原型链和继承
原型基础 每个函数都有一个prototype属性,指向函数的原型对象 每个对象都一个私有属性 __proto__, 默认指向其构造函数的prototype 在JS中所有函数都是Function构造出来 ...
- 第一百一十节,JavaScript匿名函数和闭包
JavaScript匿名函数和闭包 学习要点: 1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 第一百一十四篇: JS数组Array(三)数组常用方法
好家伙,本篇为<JS高级程序设计>第六章"集合引用类型"学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill(). 这两 ...
- 第一百一十八节,JavaScript,动态加载脚本和样式
JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
- JavaScript中的原型链和继承
理解原型链 在 JavaScript 的世界中,函数是一等公民. 上面这句话在很多地方都看到过.用我自己的话来理解就是:函数既当爹又当妈."当爹"是因为我们用函数去处理各种&quo ...
随机推荐
- Oracle PDB的相关使用说明
Oracle PDB的相关使用说明 摘要 PDB pluggable database 是Oracle12c以上的版本(Oracle18c.oracle19c) 新增加的一个特性. 他可以实现灵活插拔 ...
- Ant Design Vue封装a-drawer
1.创建子组件 <template> <a-drawer :title="drawerInfo.customTitle" :placement="pla ...
- vue如何获取动态添加的类
动态添加的类.你在声明周期中的mounted中是拿不到的. 是有在updata这个声明周期中才可以拿到的. 因为此时数据才跟新完成
- 【JS 逆向百例】网洛者反爬练习平台第五题:控制台反调试
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...
- Git、Github、Gitlab与Gitee
Git.Github.Gitlab与Gitee之间的关系 Git 是一种版本控制系统,是一个命令,是一种工具,有点像cmd(命令行工具). Github 是一个基于git实现在线代码托管的仓库,向互联 ...
- Spring框架源码分析
目录 Spring核心思想 Spring源码编译 自定义实现Spring框架IOC与DI Spring源码Ioc核心模块分析 BeanDefinition整体介绍 FactoryBean接口的使用 B ...
- 【云原生】为什么要虚拟化,为什么要容器,为什么要Docker,为什么要K8S?
前言 如标题中的问题所提到的虚拟化,容器,Docker和K8s那样,我们不妨这样问:这些技术到底适用于哪些场景,有没有别的技术可以替代?这些技术的优劣在哪里? 下面我将针对性地从以上几个问题的出发点, ...
- 小知识:Exadata平台去掉密码输错延迟10分钟登录
生产环境不评价,若是测试环境实在受不了偶尔一次因为密码输错就要等待10分钟才能登陆的限制. 那测试环境下,如何关闭这个限制呢?很简单: # vi /etc/pam.d/sshd --找到并注释掉下面这 ...
- SecureCRT使用sftp上传较大文件意外暂停
今天在一台跳转机使用SecureCRT的sftp上传较大文件时,发现中途会时常停止传输,给出提示如下: 如果此时选择Accept Once,会继续传输,但是过一段时间后,还是会停止并给出相同提示,如果 ...
- 零基础入门Vue之画龙点睛——再探监测数据
追忆 上一节:零基础入门Vue之影分身之术--列表渲染&渲染原理浅析 虽然我深知,大佬告诉我"先学应用层在了解底层,以应用层去理解底层",但Vue的数据如何检测的我不得不去 ...