原型链 继承图 JavaScript
2021/10/16 12:39:26
本文主要是介绍原型链 继承图 JavaScript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
- 代码图
- 原型链继承图
- 疑惑与解答
- 疑惑
- 解答
- 代码
代码图
原型链继承图
疑惑与解答
疑惑
解答
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_原型链继承</title> </head> <body> <!-- 方式1: 原型链继承 1. 套路 1. 定义父类型构造函数 2. 给父类型的原型添加方法 3. 定义子类型的构造函数 4. 创建父类型的对象赋值给子类型的原型 5. 将子类型原型的构造属性设置为子类型 6. 给子类型原型添加方法 7. 创建子类型的对象: 可以调用父类型的方法 2. 关键 1. 子类型的原型为父类型的一个实例对象 --> <script type="text/javascript"> //父类型-------------------------------------------- function Supper() { this.supProp = 'Supper property' } Supper.prototype.showSupperProp = function () { console.log(this.supProp) } //子类型----------------------------------------------- function Sub() { this.subProp = 'Sub property' } // 子类型的原型为父类型的一个实例对象 Sub.prototype = new Supper() // 让子类型的原型的constructor指向子类型 Sub.prototype.constructor = Sub Sub.prototype.showSubProp = function () { console.log(this.subProp) } //子类型实例对象-------------------------------------------- var sub = new Sub() sub.showSupperProp() // ??????????????????????????????????????????????????????? /* 这里其实一开始我有个疑问: 为什么sub能够调用showSubProp()这个方法? 这个方法不应该在刚开始创建的Sub.prototype实例当中吗, 后来我让Sub.prototype指向了一个父类的实例, 按理说,应该找不到这个方法了, 后来我才看到,原来是添加的顺序, 如果的我的 Sub.prototype.showSubProp = function () { console.log(this.subProp) } 添加在Sub.prototype = new Supper()之前,那么 我就无法访问这个方法了, 现在我的这个 Sub.prototype.showSubProp = function () { console.log(this.subProp) } 实际上就是添加在new Supper()创建的这个实例当中, 所以可以访问 */ sub.showSubProp() </script> </body> </html>
这篇关于原型链 继承图 JavaScript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)