JavaScript 隱式原型(_proto_)與顯示原型(prototype)

做者：蘇墨橘
連接：https://www.zhihu.com/question/34183746/answer/59043879
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

正好這段時間在從新看這部分，寫一篇回答來梳理一下吧。

__proto__（隱式原型）與prototype（顯式原型）

1. 是什麼

• 顯式原型 explicit prototype property：

每個函數在建立以後都會擁有一個名爲prototype的屬性，這個屬性指向函數的原型對象。
Note：經過Function.prototype.bind方法構造出來的函數是個例外，它沒有prototype屬性。（感謝

@ 陳禹魯

同窗的答案讓我知道這一點）

NOTE Function objects created using Function.prototype.bind do not have a prototype property or the [[Code]], [[FormalParameters]], and [[Scope]] internal properties. ----- ECMAScript Language Specification

• 隱式原型 implicit prototype link：

JavaScript中任意對象都有一個內置屬性[[prototype]]，在ES5以前沒有標準的方法訪問這個內置屬性，可是大多數瀏覽器都支持經過__proto__來訪問。ES5中有了對於這個內置屬性標準的Get方法Object.getPrototypeOf().
Note: Object.prototype 這個對象是個例外，它的__proto__值爲null

• 兩者的關係：

隱式原型指向建立這個對象的函數(constructor)的prototype

2. 做用是什麼

• 顯式原型的做用：用來實現基於原型的繼承與屬性的共享。

ECMAScript does not use classes such as those in C++, Smalltalk, or Java. Instead objects may be created in various ways including via a literal notation or via constructors which create objects and then execute code that initialises all or part of them by assigning initial values to their properties. Each constructor is a function that has a property named 「prototype」 that is used to implement prototype-based inheritance and shared properties.Objects are created by using constructors in new expressions; for example, new Date(2009,11) creates a new Date object. ----ECMAScript Language Specification

• 隱式原型的做用：構成原型鏈，一樣用於實現基於原型的繼承。舉個例子，當咱們訪問obj這個對象中的x屬性時，若是在obj中找不到，那麼就會沿着__proto__依次查找。

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s 「prototype」 ----ECMAScript Language Specification

3. __proto__的指向
__proto__的指向到底如何判斷呢？根據ECMA定義 'to the value of its constructor’s "prototype" ' ----指向建立這個對象的函數的顯式原型。因此關鍵的點在於找到建立這個對象的構造函數，接下來就來看一下JS中對象被建立的方式，一眼看過去彷佛有三種方式：（1）對象字面量的方式 （2）new 的方式 （3）ES5中的Object.create() 可是我認爲本質上只有一種方式，也就是經過new來建立。爲何這麼說呢，首先字面量的方式是一種爲了開發人員更方便建立對象的一個語法糖，本質就是 var o = new Object(); o.xx = xx;o.yy=yy; 再來看看Object.create(),這是ES5中新增的方法，在這以前這被稱爲原型式繼承，

道格拉斯在2006年寫了一篇文章，題爲 Prototypal Inheritance In JavaScript。在這篇文章中，他介紹了一種實現繼承的方法，這種方法並無使用嚴格意義上的構造函數。他的想法是藉助原型能夠基於已有的對象建立新對象，同時還不比所以建立自定義類型，爲了達到這個目的，他給出了以下函數:

function object(o){
    function F(){}
    F.prototype = o;
    return new F()
}
----- 《JavaScript高級程序設計》P169

因此從實現代碼 return new F() 中咱們能夠看到，這依然是經過new來建立的。不一樣之處在於由 Object.create() 建立出來的對象沒有構造函數，看到這裏你是否是要問，沒有構造函數我怎麼知道它的__proto__指向哪裏呢，其實這裏說它沒有構造函數是指在 Object.create() 函數外部咱們不能訪問到它的構造函數，然而在函數內部實現中是有的，它短暫地存在了那麼一下子。假設咱們如今就在函數內部，能夠看到對象的構造函數是F, 如今

//如下是用於驗證的僞代碼
var f = new F(); 
//因而有
f.__proto__ === F.prototype //true
//又由於
F.prototype === o;//true
//因此
f.__proto__ === o;

所以由Object.create(o)建立出來的對象它的隱式原型指向o。好了，對象的建立方式分析完了，如今你應該可以判斷一個對象的__proto__指向誰了。

好吧，仍是舉一些一眼看過去比較疑惑的例子來鞏固一下。

• 構造函數的顯示原型的隱式原型：

1. 內建對象(built-in object)：好比Array()，Array.prototype.__proto__指向什麼？Array.prototype也是一個對象，對象就是由 Object() 這個構造函數建立的，所以Array.prototype.__proto__ === Object.prototype //true，或者也能夠這麼理解，全部的內建對象都是由Object()建立而來。

• 自定義對象

1. 默認狀況下：

function Foo(){}
var foo = new Foo()
Foo.prototype.__proto__ === Object.prototype //true 理由同上

2. 其餘狀況：
（1）

 function Bar(){}
//這時咱們想讓Foo繼承Bar
Foo.prototype = new Bar()
 Foo.prototype.__proto__ === Bar.prototype //true

（2）

//咱們不想讓Foo繼承誰，可是咱們要本身從新定義Foo.prototype 

Foo.prototype = {
  a:10,
  b:-10
}
//這種方式就是用了對象字面量的方式來建立一個對象，根據前文所述 
Foo.prototype.__proto__ === Object.prototype

注： 以上兩種狀況都等於徹底重寫了Foo.prototype，因此Foo.prototype.constructor也跟着改變了，因而乎constructor這個屬性和原來的構造函數Foo（）也就切斷了聯繫。

• 構造函數的隱式原型

既然是構造函數那麼它就是Function（）的實例，所以也就指向Function.prototype,好比 Object.__proto__ === Function.prototype

4. instanceof
instanceof 操做符的內部實現機制和隱式原型、顯式原型有直接的關係。instanceof的左值通常是一個對象，右值通常是一個構造函數，用來判斷左值是不是右值的實例。它的內部實現原理是這樣的：

//設 L instanceof R 
//經過判斷
 L.__proto__.__proto__ ..... === R.prototype ？
//最終返回true or false

也就是沿着L的__proto__一直尋找到原型鏈末端，直到等於R.prototype爲止。知道了這個也就知道爲何如下這些奇怪的表達式爲何會獲得相應的值了

 Function instanceof Object // true 
 Object instanceof Function // true 
 Function instanceof Function //true
 Object instanceof Object // true
 Number instanceof Number //false

文章參考：JavaScript instanceof 運算符深刻剖析