JavaScript的__proto__、prototype和繼承

JavaScript也是可以“繼承”的！

各位看官或是好奇，或是一知半解。什么是prototype，__proto__，constructor、哪種繼承方式好。今天就在這交流交流。

---

什么是prototype，__proto__，constructor

https://blog.csdn.net/cc18868876837/article/details/81211729 （尊重原作者，這是篇超級好的文章，一定要點進去細細研讀）

上面文章已經講的很明白了，最后對文章總結再解釋一下

 

 

第一點主要強調，我們拿到一個對象，主要看它什么，因為JavaScript中一切都是對象，所以在理解的時候很容易因為它有其他變量也混淆，所以我們研究一個對象，首先要確定我們的目標是什么，如果目標是對象，則抓住__proto__和constructor屬性，如果目標是函數則抓住prototype屬性，這樣才能快速找到自己想要的東西解決問題。

第2,3,4點是關於哪種繼承方式好的關鍵，一定要弄懂，下面再解釋一下new關鍵詞做了什么（沒准你不懂上面文章寫的，看懂我的例子）。

---

 

new關鍵詞做了什么

//例如
var child = new Parent();

//上面這句代碼就等於下面三句
var child = {};
child.__proto__ = Parent.prototype;
Parent.call(child);

咳咳，就跟教育孩子一樣，孩子出生是張白紙（var child = {}），然后繼承了父母的一些行為（就是方法），例如怎么說話啊，喜歡吃什么啊（child.__proto__ = Parent.prototype;），最后得到父母的一些人生經驗，就是復制了屬性變量（Parent.call(child)）。

這里需要注意，孩子是不能生孩子的，即

var child2 = new child()

絕對報錯的，對象是對象，並不是函數，也不會變成函數。

---

 哪種繼承方式好

繼承能夠代碼復用，能讓邏輯更清晰，所以是很有必要的，那怎么樣繼承效果最好呢

https://www.cnblogs.com/humin/p/4556820.html#（尊重原作者，這是篇超級好的文章，一定要點進去細細研讀，這話好像有點熟悉）

推薦給大家一個方法，打開谷歌瀏覽器，按F12，在里面可以進行簡單的練習

文章最好從第一個繼承開始，就自己動手模擬一下，看看變量的__proto__和prototype到底指什么

而且從第一個繼承方法演變到最完美的一個，這個思考過程是十分重要的。

我來再解釋一下最完美的繼承模式：寄生組合繼承

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 創建一個沒有實例方法的類
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //將實例作為子類的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

感謝 @bluedrink 提醒，該實現沒有修復constructor。

Cat.prototype.constructor = Cat; // 需要修復下構造函數

第7-10行的代碼為什么這樣做

通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點 這句話什么意思

回到剛才對new的解釋，假設如組合5：組合繼承一樣

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

第5行代碼相當於：
Cat.prototype = {} 
Cat.prototype.__proto__ = Animal.prototype    
Animal.call(Cat.prototype)                    //這一步是多余的並不需要

所以 var Super = function(){};  一個空方法來代替，因為只需要

Cat.prototype.__proto__ = Animal.prototype 就可以了

而現在Super.prototype = Animal.prototype 因此這個方法是最完美的

 

以上就是本次內容的分享，感謝各位老哥的閱讀