proto 和 prototype的關(guān)系

Miracle_lihb 發(fā)布于2019-08-23 14:59 / 2752人閱讀

摘要：和的關(guān)系先上答案對象上都有屬性函數(shù)也是對象一般情況下對象的屬性指向該對象的構(gòu)造函數(shù)的原型對象。兩者的關(guān)系先上一張神圖每個被構(gòu)造函數(shù)創(chuàng)建出來的對象都有一個隱式引用，指向其構(gòu)造函數(shù)的屬性的值。

__proto__ 和 prototype的關(guān)系

先上答案：

? 對象上都有__proto__屬性（函數(shù)也是對象）

? 一般情況下對象的__proto__屬性指向該對象的構(gòu)造函數(shù)的原型對象。

? 函數(shù)上才有prototype屬性，該屬性指向該函數(shù)的原型對象。

OK，下面來詳細(xì)解釋一下

什么是__proto__

這個其實是一個 internal slot (翻譯成內(nèi)置槽？)，叫做 [[ prototype ]] ，也稱為隱式原型。在js里所有的普通對象都會有。它的值要么是 null（原型鏈的最終），要么還是一個對象。

之前并沒有一個標(biāo)準(zhǔn)的方法來訪問這個值，但是大多數(shù)瀏覽器都支持通過用.__proto__來得到它的值。所以 [[ prototype ]] 就被叫成了 __proto__ 。直到ES5中增加了標(biāo)準(zhǔn)的方法：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 語句、函數(shù)字面量或者 Function 構(gòu)造函數(shù)定義的函數(shù)都會同時自動創(chuàng)建一個 prototype 屬性，指向該函數(shù)的原型對象。

另外，通過Function.prototype.bind()創(chuàng)建的函數(shù)沒有 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 有點不同，實際上它是內(nèi)部對象%FunctionPrototype%，它本身是一個內(nèi)置函數(shù)對象。

它有一些特殊的規(guī)則，比如 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 也有一點不一樣，它其實是內(nèi)部對象%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

兩者的關(guān)系

先上一張神圖：

每個被構(gòu)造函數(shù)創(chuàng)建出來的對象都有一個隱式引用，指向其構(gòu)造函數(shù)的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

看圖說話

構(gòu)造函數(shù) Foo 的原型屬性 prototype 指向了原型對象 Foo.prototype 。f1, f2 是Foo的實例，通過指向原型對象的__proto__ 就可以繼承原型對象上公有的方法。同時，F(xiàn)oo.prototype 上constructor 屬性指回構(gòu)造函數(shù) Foo。

構(gòu)造函數(shù)Foo本身也是對象，所以也有 __proto__ ，指向了Foo的構(gòu)造函數(shù)的原型對象，也就是Function.prototype。

原型對象也是對象，所以也有 __proto__ ，指向Object.prototype。最終Object.prototype.__proto__指向 null。

（完）：）