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 運算符深入剖析