摘要：首先為了模擬類創建對象的功能搞出了構造函數。也就是名字膚色膚色這里是繼承里的自有屬性生命值這里繼承的共有屬性的方法攻擊力兵種美國大兵攻擊防御死亡膚色

我們已經準備了很多前置知識,包括

原型鏈,對象和對象之間的關系

this,對象和函數之間的關系

new, 用函數批量創建特定的對象的語法糖

JS面向對象的前世今生

我們說,面向對象是一種寫代碼的套路。因為如果滿足 封裝、繼承、多態就是面向對象的話,那JS天生就有這3個特點。

那我們JS搞的這個面向對象其實是模仿java的面向對象,因為網景公司在發明JavaScript時,希望依托java讓自己的語言火起來,
為此必須吸引java開發者來使用,所以要模仿java搞出相當于class的東西出來。

好的,現在JS和Java已經誕生了。但是Java中的繼承可以通過類實現,而JS中沒有類,JS里的繼承是通過原型鏈實現的。

至此,我們做的事情就是,讓java里用類能做的事情,我們JS也必須想辦法搞出來,而且盡可能的像java (就ES6里class的語法糖)

明確需求: 我們JS要實現的就是,java的類能做的事情,我們也要能做。

構造函數就像class一樣可以,創建特定的對象,但是java程序員認為你這構造函數,不是類

因為java的類可以這樣寫,也就是子類可以繼承父類

class Human extend Animal

但是JS最初沒有extend這樣的語法糖,來實現子構造函數繼承父構造函數

所以,JS沒法用extend關鍵字來直接繼承,于是苦思冥想出了其他方法來模擬子類繼承父類

## 于是,我們學習JS是如何模擬子類繼承父類的

JS里沒有類,所以我們肯定看的是JS是如何讓子構造函數繼承父構造函數的

      function Human(options) {
          this.名字 = options.name,
          this.膚色 = options.膚色
      }
      Human.prototype.eat = function () {}
      Human.prototype.drink = function () {}
  
  
      function Soldier(options) {
          Human.call(this,options)   // 為了得到human里的自有屬性
          this.生命值 = 42
          this.ID = options.id
      }
      Soldier.prototype.__proto__ = Human.prototype    // 為了得到human里的公有屬性
      Soldier.prototype.攻擊力 = 5
      Soldier.prototype.兵種 = "美國大兵"
      Soldier.prototype.攻擊 = function () {}
      Soldier.prototype.防御 = function () {}
      Soldier.prototype.死亡 = function () {}
  
      var soldier = new Soldier({name:"ziwei",膚色:"yellow",id:"8"})
      console.log(soldier);  

這個方案是OK的,問題在于__proto__不允許在生產環境使用,文檔明確有要求的,影響性能

其實這個思路是很對的,JS肯定要用__proto__才能繼承。

現在的問題就是,我要用__proto__,但是JS不讓我用。

所以JS開發者就十分擰巴的用new來用__proto__,怎么用呢,看下面代碼:

Soldier.prototype.__proto__ = Human.prototype

改成

function Fn(){}

Fn.prototype = Human.prototype

Soldier.prototype = new Fn()

怎么解釋呢?

因為 Soldier.prototype是Fn構造函數的實例,

所以 Soldier.prototype.__proto__ ==== Fn.prototype

而 Fn.prototype === Human.prototype

推論 Soldier.prototype.__proto__ === Human.prototype

完整的Soldier繼承Human

      function Human(options) {
          this.名字 = options.name,
          this.膚色 = options.膚色
      }
      Human.prototype.eat = function () {}
      Human.prototype.drink = function () {}
  
  
      function Soldier(options) {
          Human.call(this,options)              //  這里是繼承Human里的自有屬性
          this.生命值 = 42
          this.ID = options.id
      }
      function Fn(){}
      Fn.prototype = Human.prototype
      Soldier.prototype = new Fn()                // 成功繼承Human的共有屬性 ,私有屬性不要           
      
      Soldier.prototype.攻擊力 = 5
      Soldier.prototype.兵種 = "美國大兵"
      Soldier.prototype.攻擊 = function () {}
      Soldier.prototype.防御 = function () {}
      Soldier.prototype.死亡 = function () {}
  
      var soldier = new Soldier({name:"ziwei",膚色:"yellow",id:"8"})
      console.log(soldier);  

介紹Object.create()

接收一個參數obj1,return一個結果obj2

obj2會繼承obj1的屬性。也就是obj2.__proto__ = obj1

      function Human(options) {
          this.名字 = options.name,
          this.膚色 = options.膚色
      }
      Human.prototype.eat = function () {}
      Human.prototype.drink = function () {}
  
  
      function Soldier(options) {
          Human.call(this,options)              //  這里是繼承Human里的自有屬性
          this.生命值 = 42
          this.ID = options.id
      }
      
      Soldier.prototype = Object.create(Human.prototype)    // 這里繼承 Human 的共有屬性,ES5的方法
      
      Soldier.prototype.攻擊力 = 5
      Soldier.prototype.兵種 = "美國大兵"
      Soldier.prototype.攻擊 = function () {}
      Soldier.prototype.防御 = function () {}
      Soldier.prototype.死亡 = function () {}
  
      var soldier = new Soldier({name:"ziwei",膚色:"yellow",id:"8"})
      console.log(soldier);