美文网首页
JS原型02之原型链

JS原型02之原型链

作者: 63537b720fdb | 来源:发表于2020-06-29 21:43 被阅读0次

1.如何构成原型链
2.原型链上属性的增删改查
原型链上的增删改查和原型一致,只有本人能操作
3.绝大多数对象最终会继承自Object.prototype
4.Object.create(原型)

原型链其实就是一个对象通过原型继承的方式,继承了许多个原型,这些原型由近到远呈链式状态排序,存放在对象的_proto_上,对象根据需要,由进到远的获取原型链上的属性。
举例:
son获取Grand() prototype上的属性

image.png
image.png
解释继承的过程:
首先构造出Grand()时,Grand()就有了他的prototype属性,并往prototype中添加了name属性;
当通过构造函数构造出grand对象时,grand就通过自己的_proto_属性找到了Grand()的prototype;
继续构造出Father(),并将grand对象赋值给自己的prototype,这一句可理解为,grand的_proto_中存了Grand()的prototype,将grand赋值给Father.prototype时,Father.prototype就可以通过grand的_proto_找到Grand()的prototype,所以Father.prototype继承了Grand.prototype;
当用构造函数Father()构造出对象father时,father对象就通过自己的_proto_找到了Father()的prototype,这时father对象就继承了Grand()的prototype;
继续构造Son()函数,并将father对象赋值给Son的prototype,Son.prototype便通过father对象的_proto_找到Father.prototype,而Father.prototype通过grand对象继承了Grand.prototype,所以father对象的_proto_就存放了Grand()的prototype。

son-->son._proto_-->Son.prototype-->father-->father._proto_-->Father.prototype-->grand._proto_-->Grand.prototype

son对象中的原型链:


image.png

son的原型链的顶端就是Grand.prototype

总结:原型链与原型链之间其实是通过各自对象的_proto_进行连接,_proto_中存放的就是对象的prototype

原型链上的属性同样符合只能自己修改的原则
举例:
给Father.prototype添加属性,由于Father.prototype继承自Grand.prototype,所以Father.prototype自身的操作并不影响Grand.prototype


image.png

绝大多数的对象最终会继承自Object.prototype如何理解
首先prototype也是一个对象,他同样有_proto_属性,里面也存放着prototype的prototype,也就是说原型上也有原型。

image.png
所以前面提到的son对象原型的顶端应该是Object.prototype,因为Grand.prototype里也有_proto_属性,里面存放的是Grand.prototype的prototype,通过查看Grand.prototype的_proto_存放的是Object.prototype
image.png

var obj = Object.create(原型) obj就能继承自create里的原型
举例:


image.png image.png

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • JS原型02之原型链

    1.如何构成原型链2.原型链上属性的增删改查原型链上的增删改查和原型一致,只有本人能操作3.绝大多数对象最终会继承...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 关于JS中的原型和原型链

    目录 关于js 对象和原型 原型链 基于原型链的继承 参考资料ECMAScript 6 入门JavaScript原...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • 从实现角度分析js原型链

    从实现角度分析js原型链 欢迎来我的博客阅读:《从实现角度分析js原型链》 网上介绍原型链的优质文章已经有很多了,...

网友评论

      本文标题:JS原型02之原型链

      本文链接:https://www.haomeiwen.com/subject/iztafktx.html