资讯专栏INFORMATION COLUMN

__proto__ 和 prototype的关系

Miracle_lihb / 2742人阅读

摘要:和的关系先上答案对象上都有属性函数也是对象一般情况下对象的属性指向该对象的构造函数的原型对象。两者的关系先上一张神图每个被构造函数创建出来的对象都有一个隐式引用,指向其构造函数的属性的值。

__proto__ 和 prototype的关系
先上答案:

​ 对象上都有__proto__属性(函数也是对象)

​ 一般情况下对象的__proto__属性指向该对象的构造函数的原型对象。

​ 函数上才有prototype属性,该属性指向该函数的原型对象。

OK,下面来详细解释一下

什么是__proto__

这个其实是一个 internal slot (翻译成内置槽?),叫做 [[ prototype ]] ,也称为隐式原型。在js里所有的普通对象都会有。它的值要么是 null(原型链的最终), 要么还是一个对象。

之前并没有一个标准的方法来访问这个值,但是大多数浏览器都支持通过用.__proto__来得到它的值。所以 [[ prototype ]] 就被叫成了 __proto__ 。直到ES5中增加了标准的方法 :Object.getPrototypeOf()

All ordinary objects have an internal slot called [[Prototype]]. The value of this internal slot is either null or an object and is used for implementing inheritance. 

ECMAScript Language Specification

什么是prototype

所有用 function 语句、函数字面量或者 Function 构造函数定义的函数都会同时自动创建一个 prototype 属性,指向该函数的原型对象。

另外,通过Function.prototype.bind()创建的函数没有 prototype 属性。

NOTE 1 Function objects created using Function.prototype.bind are exotic objects. They also do not have     a prototype property.

ECMAScript Language Specification

这里 Function 的 prototype 有点不同,实际上它是内部对象%FunctionPrototype%,它本身是一个内置函数对象。

它有一些特殊的规则,比如 Function.prototype.length === 0 等

The Function prototype object is the intrinsic object %FunctionPrototype%. The Function prototype object is itself a built-in function object. When invoked, it accepts any arguments and returns undefined. It does not have a [[Construct]] internal method so it is not a constructor.

NOTEThe Function prototype object is specified to be a function object to ensure compatibility with ECMAScript code that was created prior to the ECMAScript 2015 specification.

The value of the [[Prototype]] internal slot of the Function prototype object is the intrinsic object %ObjectPrototype% (19.1.3). The initial value of the [[Extensible]] internal slot of the Function prototype object is true.

The Function prototype object does not have a prototype property.

The value of the length property of the Function prototype object is 0.

The value of the name property of the Function prototype object is the empty String.

ECMAScript Language Specification

Object 的 prototype 也有一点不一样,它其实是内部对象%ObjectPrototype%,它本身是一个普通对象。

做为对象它的 __proto__ 也就是 [[prototype]] 值为 null 。

Object.prototype上挂载着valueOf,toString等方法。

The Object prototype object is the intrinsic object %ObjectPrototype%. The Object prototype object is an ordinary object.

The value of the [[Prototype]] internal slot of the Object prototype object is null and the initial value of the [[Extensible]] internal slot is true.

ECMAScript Language Specification

两者的关系

先上一张神图 :

每个被构造函数创建出来的对象都有一个隐式引用,指向其构造函数的prototype属性的值。此外,一个原型可能对它的原型有一个非空的隐式引用,以此类推,就叫做原型链。

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s "prototype" property. Furthermore, a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain. When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. In other words, first the object mentioned directly is examined for such a property; if that object contains the named property, that is the property to which the reference refers; if that object does not contain the named property, the prototype for that object is examined next; and so on.

ECMAScript Language Specification

看图说话

构造函数 Foo 的原型属性 prototype 指向了原型对象 Foo.prototype 。f1, f2 是Foo的实例,通过指向原型对象的__proto__ 就可以继承原型对象上公有的方法。同时,Foo.prototype 上constructor 属性指回 构造函数 Foo。

构造函数Foo本身也是对象,所以也有 __proto__ ,指向了Foo的构造函数的原型对象,也就是Function.prototype。

原型对象也是对象,所以也有 __proto__ ,指向Object.prototype。最终Object.prototype.__proto__指向 null。

(完) :)

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

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

相关文章

  • JavaScript原型链以及Object,Function之间关系

    摘要:由于一般所有的原型链最终都会指向顶端的,所以它们都是的。好了现在了,成了所有对象原型链的。 JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承。当然__proto__本身也是一个对象,它自己也有自己的__proto__,这样一级一级向上,就构成了一个__proto__链,即原型链。当然原型链不会无限向上,它有...

    zacklee 评论0 收藏0
  • JavaScript中__proto__prototype关系

    摘要:了解中原型以及原型链只需要记住以下点即可对象都有属性,指向构造函数的构造函数函数都有属性,指向构造函数的原型对象的内置构造函数可知所有的构造函数都继承于甚至包括根构造器及自身。 了解JavaScript中原型以及原型链只需要记住以下2点即可 对象都有__proto__属性,指向构造函数的prototype 构造函数函数都有prototype属性,指向构造函数的原型 1、对象的__p...

    justjavac 评论0 收藏0
  • 原型链是什么?关于原型链中constructor、prototype及__proto__之间关系

    摘要:的隐式原型是母,母是由构造函数构造的,但函数的隐式原型又是。。。。可能是考虑到它也是由构造函数生成的吧,所以返回的值也是。 showImg(https://segmentfault.com/img/bVyLk0); 首先,我们暂且把object类型和function类型分开来,因为 function是一个特殊的对象类型,我们这里这是便于区分,把function类型单独拿出来。顺便一提,...

    kaka 评论0 收藏0
  • JavaScript:__proto__prototype关系

    摘要:可以通过上述路线图来观察。注意到也是一个对象,所以也有属性,这样就构成了一个原型链,最高到达为止。对于函数而言,它的指向。而这个原型对象本身不等于而是它的属性等于当我们手动改变一个对象的原型时即改变指向,注意。 showImg(https://segmentfault.com/img/remote/1460000011001563); 可以通过上述路线图来观察。 函数和对象,都有一个...

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

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

    苏丹 评论0 收藏0

发表评论

0条评论

Miracle_lihb

|高级讲师

TA的文章

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