javascript原型對象

先來作個複習，ES5中有有幾種數據類型呢？

• 5種基本數據類型
  • Undefined
  • Null
  • Boolean
  • Number
  • String
• 1種複雜數據類型
  • Object

除了基本數據類型，萬物皆對象，記住這個很重要，這體現了js設計的哲學思想，和現實生活事物存在的關係如出一轍。

接觸js也一年有餘了，剛開始看各類概念感受在記憶，先能上手幹活的感受也讓本身先用了js起來，回頭來看不少概念你不真正用的有些感悟可能真的很迷糊，就像今天忽然問本身__proto__ 是幹嗎的，和它長得很像的prototype又是幹嗎的，爲啥不都用一個，看起來讀起來都那麼像。。。。ok，我儘可能把本身所思所想記錄下來，能表達的清晰，哈哈其實我理解能力有限哈哈哈。

不讓本身思惟繞彎子，當咱們想徹底弄清楚一件事情的時候，那麼最好搞清楚咱們最關心的兩個問題：它是什麼，有什麼用，那麼先直接給幾個定論（若是有誤區請各位大神指正）：

是什麼

• __proto__ 
  每一個對象都擁有的屬性

• prototype 
  每一個方法都擁有的屬性

有什麼用

• 讓js擁有了原型鏈來達到共享數據和方法的目的

好了，先來講是什麼，那麼讓咱們想一想幾個關鍵字：每一個對象，每一個方法，那麼記得開始很重要的一件事兒麼，就是js中萬物皆對象，那麼方法是什麼鬼，沒錯，方法也是對象，一種須要特殊拎出來的對象，特殊在哪呢，那麼牛逼。。。。其實就是要理解是什麼中，方法比對象更牛逼一些，由於它既是對象又是方法。。。。因此呢？說明方法既有__proto__屬性又有prototype屬性。那麼咱們能夠開始看例子來加深理解：

var A = function(){}; // A是一個方法，固然也是個對象  
var a = new A(); // a是一個由A創造出的對象，不是方法  

//看一看對象非方法的行爲
console.log(a.__proto__); //object  
console.log(a.prototype); //undefined, 對象沒有 

//看一看方法的行爲，方法也是對象哦

console.log(A.__proto__); //function  
console.log(A.prototype); //object

是否是有點暈了，哈哈我也是，別急至少咱們驗證了咱們是什麼的定論，接下來研究下有什麼用，其實在這以前難道很差奇a.__proto__，a.prototype, A.__proto__，A.prototype, 都等於誰嗎？那咱們來接着驗證。

console.log(a.__proto__ === A.prototype); //true  
console.log(a.prototype === undefined); //true

console.log(A.__proto__ === Function.prototype); //true  
console.log(A.prototype === a.__proto__); //true

矣，是否是看出來點神馬？沒錯，有一點點原型鏈的感受了，那麼繼續

//先看a這條鏈
console.log(a.__proto__.__proto__ === A.prototype.__proto__); //true  
console.log(a.__proto__.__proto__ === Object.prototype);//true  
console.log(a.__proto__.__proto__.__proto__ === Object.prototype.__proto__);//true  
console.log(a.__proto__.__proto__.__proto__ === null);//true


//再看看A這條條鏈
console.log(A.__proto__.__proto__ === Function.prototype.__proto__);//true  
console.log(A.__proto__.__proto__ === Object.prototype);//true  
console.log(A.__proto__.__proto__.__proto__ === Object.prototype.__proto__);//true  
console.log(A.__proto__.__proto__.__proto__ === null);//true

矣，像不像兩個鏈條了？並且這兩個鏈條還有些關係呢，頭大？我也是。。要不來張圖吧

說明一下，這裏有兩類事物：對象和對象方法，對象方法是我起的名字。。。哈哈，記住方法也是對象，js萬物皆對象哦。其中紅色框是表示的原型對象，網上不少圖把它和擁有它的對象畫在一塊兒，我以爲不夠直觀，因此就本身畫出來啦，對照上面總結的是什麼和原型鏈的驗證，再配合這張圖，箇中體會，哈哈有木有豁然開朗的趕腳，若是沒有沒關係，多看幾遍嘍哈哈哈

而後咱們來看下，這張圖幾個有意思的地方。

• 首先看a對象，有三種不一樣方式建立的a對象，它們的原型鏈指向是不一樣的哦，體會一下，是否是仍是很合情合理。
• Function的__proto__指向的是本身即Function的prototype，而Function的prototype的__proto__指向的是Object的prototype,而Object的__proto__指向了Function的prototype，what????沒錯，看圖，它們造成了一個環狀引用。。。因此知道爲何說方法也是對象了吧，看到沒，萬物歸終，最後都指向了Object, 而Object的原型鏈又指向誰了呢，一個大大的null，哈沒錯，null是到頭了，空也是終極對象啊，看到js的哲學了麼，其實萬物皆空，善哉善哉。。。
• 最後來解決文章剛開始提出的問題，__proto__和prototype爲啥會有兩個，用一個不行嘛，看了圖或許咱們能參悟到了吧
  • __proto__纔是原型鏈, 除了第三種方式建立的對象和Object的終極指向，它始終指向prototype
  • prototype是一個原型對象，其中包含的屬性（用戶自我添加的）就是咱們總結的有什麼用中提到的，就是包含共享的數據和方法的對象
  • 至於爲何有兩個，很簡單，兩我的乾的事兒不同，不能互相代替，__proto__是指向共享原型對象的訪問句柄，而prototype是被訪問的共享原型對象，打個不恰當的比喻，你們同時用右手搭在別人肩上排成一排的時候，連接人與人之間的手和人能同樣麼，缺乏一個，還能是鏈條麼，固然不能拉，忽然想起來，以爲是否是很像一種數據結構，雖然我不經常使用，可是感受哇在這裏見到了呢，是什麼呢？沒錯，是鏈表！