js中的繼承關(guān)鍵是靠__proto__屬性實現(xiàn)的
prototype屬性的職責(zé)是將原型鏈中的數(shù)據(jù)放入__proto__中的中介，即我們在new 一個對象的時候

js中有兩種對象，即函數(shù)對象和普通對象

• 函數(shù)對象： 凡是通過new Function()創(chuàng)建的都是函數(shù)對象
  函數(shù)對象屬性包含__proto__和prototype兩個屬性；而普通對象有__proto__沒有prototype屬性，
  像 Number;Object;Array都是函數(shù)對象

//例如 
var a = function(){};  function a(){}; var a = new Function(); var a = Function();

• 普通對象： 不是通過new Function()創(chuàng)建的對象

//例如
 var a = 1 即(a = new Number(1)); var a = 'hello'即(a = new String(1));var a = []即(a = new Array());

• __proto__
  主要用來回溯對象，即用來繼承的，即當執(zhí)行a.b的時候，如果當前對象沒有定義b屬性，則會通過a.__proto__到父對象中查找，以此類推
• prototype
  *其值是函數(shù)創(chuàng)建的時候創(chuàng)建了一個它的實例對象，并賦值給prototype，其作用是將值傳遞給實例對象的__proto__，以實現(xiàn)繼承
• 實例代碼 Function
  主要演示函數(shù)對象Function的__proto__屬性以及prototype屬性的值

   console.log('--------------------------------函數(shù)對象Function--------------------------------------');
 //函數(shù)對象Function   Function.prototype === Function.__proto__  (true)
 //此例比如 var temp = new Function();Function.prototype = temp;
//所以Function.prototype 為function
 console.log('Function.prototype:',Function.prototype);
 console.log('Function.__proto__:',Function.__proto__);
 //原始對象Object
 console.log('Function.prototype.__proto__:',Function.prototype.__proto__);
 console.log('Function.__proto__.__proto__:',Function.__proto__.__proto__);
 //一切的起點null 所有對象通過__proto__回溯都會找到null
 console.log('Function.prototype.__proto__.__proto__:',Function.prototype.__proto__.__proto__);
 console.log('Function.__proto__.__proto__.__proto__:',Function.__proto__.__proto__.__proto__);
 //會抱錯，null是起點 null沒有__proto__屬性 不能在回溯
console.log('Function.prototype.__proto__.__proto__.__proto__:',Function.__proto__.__proto__.__proto__.__proto__);
console.log('Function.__proto__.__proto__.__proto__.__proto__:',Function.__proto__.__proto__.__proto__.__proto__);

• chrome下輸出

  
  
  1.png
• 實例代碼 Number
  主要演示函數(shù)對象Number的__proto__屬性以及prototype屬性的值

   console.log('--------------------------------函數(shù)對象Number--------------------------------------');
 //函數(shù)對象Number  其實可以理解為var Number = new Function();
 //原型對象prototype的值實際是函數(shù)創(chuàng)建的時候創(chuàng)建了一個它的實例對象，并賦值給prototype
//此例比如  var temp = new Number();Number.prototype = temp;Number.prototype 為Number的實例對象，是普通對象,繼承自O(shè)bject
//所以typeof Number.prototype 為 Object
//Number為Function的實例對象，而Function.__proto__為function ,
//所以typeof Number.__proto__ 為 function
console.log('Number.prototype:',Number.prototype);
console.log('Number.__proto__:',Number.__proto__);
console.log('typeof Number.prototype:',typeof Number.prototype);
console.log('typeof Number.__proto__:',typeof Number.__proto__);
//原始對象Object
console.log('Number.prototype.__proto__:',Number.prototype.__proto__);
console.log('Number.__proto__.__proto__:',Number.__proto__.__proto__);
//原始對象 無中生有的無 即null，
console.log('Number.prototype.__proto__.__proto__:',Number.prototype.__proto__.__proto__);
console.log('Number.__proto__.__proto__.__proto__:',Number.__proto__.__proto__.__proto__);
//會抱錯，因為null沒有__proto__屬性console.log('Number.prototype.__proto__.__proto__.__proto__:',Number.__proto__.__proto__.__proto__.__proto__);
console.log('Number.__proto__.__proto__.__proto__.__proto__:',Number.__proto__.__proto__.__proto__.__proto__);

• chrome下輸出

  
  
  2.png
• 實例代碼 Object
  主要演示函數(shù)對象Object的__proto__屬性以及prototype屬性的值

console.log('--------------------------------函數(shù)對象Object--------------------------------------');
console.log('Object.prototype:',Object.prototype);
console.log('Object.__proto__:',Object.__proto__);
console.log('typeof Object.prototype:',typeof Object.prototype);
console.log('typeof Object.__proto__:',typeof Object.__proto__);
//原始對象 無中生有的無 即null，
console.log('Object.prototype.__proto__:',Object.prototype.__proto__);
//Object
console.log('Object.__proto__.__proto__:',Object.__proto__.__proto__);
//null
console.log('Object.__proto__.__proto__.__proto__:',Object.__proto__.__proto__.__proto__); 
//抱錯
//console.log('Object.prototype.__proto__.__proto__:',Object.prototype.__proto__.__proto__);

• chrome下輸出

  
  
  3.png
• 實例代碼
  主要演示普通對象的__proto__屬性以及prototype屬性的值

console.log('--------------------------------普通對象--------------------------------------');
 //例如 var a = 1 即(a = new Number(1)); var a = 'hello'即(a = new String(1));var a = []即(a = new Array());
   function obj(){
    this.a = 1;this.b = 2; }
    obj.prototype.pMethod=function(){
    console.log('ddd');
   }
   var c = new obj();
//普通對象c 沒有prototype屬性，所以typeof c.prototype 為 Object
//c為Function的實例對象，而Function.__proto__為function 
//所以typeof c.__proto__ 為 function
console.log('c.prototype:',c.prototype);  //undefined
//我們再來看看__proto__的定義：他的值是創(chuàng)建實例對象的時候?qū)?yīng)的函數(shù)對象的原型對象
//即obj.prototype = new obj();
//obj.prototype.pMethod=function(){console.log('ddd');}
//c.__proto__ = obj.prototype;
//此時__proto__中有obj實例對象以及pMethod函數(shù)、__prototype__ 屬性
   console.log('c.__proto__:',c.__proto__);
//如果我們這樣定義原型鏈函數(shù)
   obj.prototype = {
    pMethod:function(){
     console.log('ddd');
    }
   }
   var c = new obj();
   //__proto__的定義：他的值是創(chuàng)建實例對象的時候?qū)?yīng)的函數(shù)對象的原型對象
   //即obj.prototype = new obj();
   //obj.prototype= {pMethod:function(){console.log('ddd');}}
   //c.__proto__ = obj.prototype
   //此時__proto__中有pMethod函數(shù)、__prototype__ 屬性
   console.log('c.__proto__:',c.__proto__);
   //原始對象Object
   console.log('c.__proto__.__proto__:',c.__proto__.__proto__);
   //原始對象 無中生有的無 即null，
 console.log('c.__proto__.__proto__.__proto__:',c.__proto__.__proto__.__proto__);
//會抱錯，因為null沒有__proto__屬性 //console.log('c.prototype.__proto__.__proto__.__proto__:',c.__proto__.__proto__.__proto__.__proto__);

• chrome下輸出

  
  
  4.png

總結(jié)

一個對象的proto記錄著自己的原型鏈，決定了自身的數(shù)據(jù)類型，改變proto就等于改變對象的數(shù)據(jù)類型。
函數(shù)的prototype不屬于自身的原型鏈，其值是創(chuàng)建函數(shù)對象的實例，它是子類創(chuàng)建的核心，決定了子類的數(shù)據(jù)類型，是連接子類原型鏈的橋梁。
在原型對象上定義方法和屬性的目的是為了被子類繼承和使用