为了账号安全,请及时绑定邮箱和手机立即绑定

js的原型和原型链 (什么是原型和原型链)

标签:
JavaScript

js 原型 原型链

https://img1.sycdn.imooc.com//5fb73ea30001737509740595.jpg

原型

解释: 原型是首创的模型,代表同一类型的人物、物件、或观念(维基百科)。那边对应到javascript 中来, 我们可以理解为:原型是对象创建之初的的模型,拥有同一类对象的公有属性和行为(方法)。

原型对象( prototype )

在js中每个函数都有一个指向原型的属性——prototype,称为原型对象。原型对象中有一个指向构造函数的的属性——constructor。这里的函数不光包括构造函数,也包括普通函数。

  • 原型对象拥有公有的属性和方法

  • js 继承是基于原型对象的

https://img1.sycdn.imooc.com//5fb73ea40001adba04110051.jpg

function Fn (name) {  this.name = name
}console.log(Fn.prototype)
Fn.prototype.constructor === Fn //true复制代码

原型链 ( proto )

在js 中每个对象(null 除外)都有一个属性__proto__, 该属性指向原型对象,换句话说则是:该对象是从那个原型对象继承属性和方法,我们可以通过此属性来找到,原型链则是基于__proto__来实现的。
当我们访问一个对象的属性或者方法的时候,会先去对象自身找这个属性或者方法,如果没有找到,则会去它的原型对象身上找,如果原型对象身上也没有找到,则会到原型对象的原型对象上去找,以此类推,找到则返回对应的值,如果直到原型对象为null任然没有找到则返回undefined。

https://img1.sycdn.imooc.com//5fb73ea40001a71608360218.jpg

function Fn(name) {  this.name = name
}
Fn.__proto__ === Fn.prototype // trueFn.__proto__.__proto__ ===  Fn.prototype.__proto__ === Object.prototype // rueObjcet.prototype.__proto__ === null // rue复制代码

上面说到,每个js 对象都有一个属性__proto__,那么,在万物皆对象的js中函数也是对象,那么函数是否也存在__proto__属性了?对。函数的__proto__指向那个原型对象? 实例的__proto__指向构造函数的prototype。从这句话中,我们可以判断出,其实 Object、Function 以及js中其他的构造函数本质上都可看成Function构造函数的实例,因此回到文章开头的关系图,可以得出:

function Fn(name) {  this.name = name
}
Fn.__proto__ === Function.prototypeObject.__proto__ === Function.prototype // trueFunction.__proto__ === Function.prototype // trueArray.__proto__ === Function.prototype // true复制代码

补充

  • 通过 Object.create(null) 创建的对象没有原型对象

总结

  • js对象创建之初都会关联一个对象——prototype

  • js对象通过__proto__属性建立原型链关系,从而继承属性和行为(方法)

  • 所有实例的__proto__指向其构造函数的原型对象

  • 原型链的顶层为null(可以理解为没有原型对象了)


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消