资讯专栏INFORMATION COLUMN

__proto__与prototype的理解

tommego / 1839人阅读

这篇文章主要 解决的问题 是:什么是__proto__?什么是prototype?他们的关系是什么?在原型链中扮演什么角色?
proto和prototype

prototype是函数的一个属性,在定义构造函数的时候自动创建,它指向函数的原型,被 __proto__指向。这个原型对象里包含着自定义的方法属性。

__proto__是对象的内部属性,它指向构造器的prototype,对象依赖它来进行原型链的查询,instanceof方法也是依赖它来判断是否存在继承关系。

prototype只能作为构造函数的属性,而__proto__可以作为任意对象的属性。

proto、prototype和原型链之间的联系

看一段代码:

 function Foo(name) { this.name = name };
 Foo.prototype.age = 18;
 let student = new Foo("holy");

我们通过一张图来表示这段代码构建的原型链:

这张图中原型链可分成两部分:

student ---> Foo.prototype ---> Object.prototype ---> null
Foo ---> Function.prototype ---> Object.prototype ---> null

我们从 对象student 看起:根据 概念3 , prototype 只能作为构造函数的属性,__proto__只能作为对象的属性。所以对象sutdent 只有__proto__,没有prototype。

student.prototype;
undefined

student对象 是Foo构造函数的一个实例,根据 概念2 它的__proto__指向Foo.prototype

student.__ptoto__ == Foo.prototype;
true

以为 Foo.prototype 是一个对象,所以 Foo.prototype.__proto__指向 Object.prototype

Foo.prototype.__proto__ == Object.prototype;
true

再来看第二部分:
Foo 是一个函数,所以 Foo.__proto__指向 Function.prototype

Foo.__proto__ == Function.prototype
true

再 JavaScript 中函数都是第一公民,而且函数也是对象,所以Function.prototype.__proto__指向 Object.prototype

Function.prototype.__proto__ == Object.prototype
true
原型链的工作流程

student.name 在student中找到 name属性,返回“holy”;

student.age 在student中未找到,于是通过student.__proto__在Foo.prototype中找到,返回 18;

student.toString() 在student中未找到,接着通过student.__proto__在Foo.prototype中寻找,未找到,继续通过Foo.prototype.__proto__在Object.prototype中寻找,找到了,返回‘[object object]’。

student.getWeight() 依次在student、Foo.prototype、Object.prototype中寻找,均未找到,抛出错误。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92429.html

相关文章

  • 深入理解:JavaScript原型继承

    摘要:深入理解原型与继承看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解。 深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解。 首先JavaScript是一门基于原型编程的语言...

    mengbo 评论0 收藏0
  • 这样理解原型原型链比较简单

    摘要:属性这是每个对象都有的隐式原型属性,指向了创建该对象的构造函数的原型。 原型 在JavaScript中,有两个原型,分别是 prototype 和 _proto_注:在ECMA-262第5版中管这个 _proto_ 叫 [[Prototype]] prototype 属性:这是一个显式原型属性,只有函数才拥有该属性。_proto_ 属性:这是每个对象都有的隐式原型属性,指向了创建该对象...

    csRyan 评论0 收藏0
  • js内功修炼之九阳神功--原型链

    摘要:写在前面如果说是一本武学典籍,那么原型链就是九阳神功。那么,如何修炼好中的九阳神功呢真正的功法大成的技术是从底层上去理解,那种工程师和码农的区别就在于对底层的理解,当你写完一行代码,或者你遇见一个解决的速度取决于你对底层的理解。 写在前面 如果说JavaScript是一本武学典籍,那么原型链就是九阳神功。在金庸的武侠小说里面,对九阳神功是这样描述的:练成「九阳神功」后,会易筋洗髓;生出...

    苏丹 评论0 收藏0
  • js内功修炼之九阳神功--原型链

    摘要:写在前面如果说是一本武学典籍,那么原型链就是九阳神功。那么,如何修炼好中的九阳神功呢真正的功法大成的技术是从底层上去理解,那种工程师和码农的区别就在于对底层的理解,当你写完一行代码,或者你遇见一个解决的速度取决于你对底层的理解。 写在前面 如果说JavaScript是一本武学典籍,那么原型链就是九阳神功。在金庸的武侠小说里面,对九阳神功是这样描述的:练成「九阳神功」后,会易筋洗髓;生出...

    Profeel 评论0 收藏0

发表评论

0条评论

tommego

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<