JS 中的 __proto__ 與 prototype

__proto__ 探究

__proto__隱式原型與prototype顯式原型是個容易使人混淆的概念，簡而言之prototype是構造函數用來被本身的實例繼承的原型，而_proto_是實例用來繼承父類原型的載體。

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() 。
__proto__是瀏覽器自實現的[[prototype]]

兩者的關係

隱式原型指向建立這個對象的函數（構造函數constructor）的顯式原型prototype

function Person(name) {this.name = name}
var person1 = new Person
console.log(person1.__proto__ === Person.prototype)                    // true
console.log(Object.getPrototypeOf(person1) === person1.__proto__)        // true
console.log(person1.prototype === person1.__proto__)                    // false
console.log(Object.getPrototypeOf(Person) === Person.__proto__)    // true
console.log(Person.prototype===Person.__proto__)                        // false
console.log(person1.constructor === Person)                                // true

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中對象被建立的方式，一眼看過去彷佛有三種方式：對象字面量的方式 、new 的方式 、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__指向誰了。
好吧，仍是舉一些一眼看過去比較疑惑的例子來鞏固一下。

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

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

• 自定義對象

默認狀況下：

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

其餘狀況：

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

//咱們不想讓Foo繼承誰，可是咱們要本身從新定義Foo.prototype
Foo.prototype = {
  a:10,
  b:-10
}
//這種方式就是用了對象字面量的方式來建立一個對象，根據前文所述 
Foo.prototype.__proto__ === Object.prototype

Note： 以上兩種狀況都等於徹底重寫了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爲止。知道了這個也就知道爲何如下這些奇怪的表達式爲何會獲得相應的值了，全部構造函數都是Fucntion的實例，全部對象都是Object的實例

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

5. Js對象體系結構

• 每個對象都有__proto__，誰建立的對象（繼承誰），__proto__就指向誰的prototype
• 全部的函數都是由Function()建立的，因此全部的函數的__proto__就指向Function的prototype，包括它本身
• 函數有prototype，普通實例對象沒有，且函數的prototype都有一個自有屬性constructor指向本身
• 全部的prototype也是對象，是由Object()建立（繼承Object）而來的，因此全部的prototype的__proto__都指向Object

6. 謹慎操做__proto__

警告: 因爲現代 JavaScript 引擎優化屬性訪問所帶來的特性的關係，更改對象的 [[Prototype]]在各個瀏覽器和 JavaScript 引擎上都是一個很慢的操做。其在更改繼承的性能上的影響是微妙而又普遍的，這不只僅限於 obj.__proto__ = ... 語句上的時間花費，並且可能會延伸到任何代碼，那些能夠訪問任何[[Prototype]]已被更改的對象的代碼。若是你關心性能，你應該避免設置一個對象的 [[Prototype]]。相反，你應該使用 Object.create()來建立帶有你想要的[[Prototype]]的新對象。

---

網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

參考：
一、 js中__proto__和prototype的區別和關係？
二、 G小調的悲傷的博客
三、 JavaScript instanceof 運算符深刻剖析

PS：歡迎你們關注個人公衆號【前端下午茶】，一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣，長按識別下面二維碼便可加我好友，備註加羣，我拉你入羣～