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

我們已經(jīng)準(zhǔn)備了很多前置知識,包括

原型鏈,對象和對象之間的關(guān)系

this,對象和函數(shù)之間的關(guān)系

new, 用函數(shù)批量創(chuàng)建特定的對象的語法糖

JS面向?qū)ο蟮那笆澜裆?/pre>
我們說,面向?qū)ο笫且环N寫代碼的套路。因為如果滿足 封裝、繼承、多態(tài)就是面向?qū)ο蟮脑?那JS天生就有這3個特點。
那我們JS搞的這個面向?qū)ο笃鋵嵤悄７耲ava的面向?qū)ο?因為網(wǎng)景公司在發(fā)明JavaScript時,希望依托java讓自己的語言火起來,
為此必須吸引java開發(fā)者來使用,所以要模仿java搞出相當(dāng)于class的東西出來。
好的,現(xiàn)在JS和Java已經(jīng)誕生了。但是Java中的繼承可以通過類實現(xiàn),而JS中沒有類,JS里的繼承是通過原型鏈實現(xiàn)的。
至此,我們做的事情就是,讓java里用類能做的事情,我們JS也必須想辦法搞出來,而且盡可能的像java (就ES6里class的語法糖)
明確需求: 我們JS要實現(xiàn)的就是,java的類能做的事情,我們也要能做。
首先,JS為了模擬類創(chuàng)建對象的功能,搞出了構(gòu)造函數(shù)。
構(gòu)造函數(shù)就像class一樣可以,創(chuàng)建特定的對象,但是java程序員認(rèn)為你這構(gòu)造函數(shù),不是類
因為java的類可以這樣寫,也就是子類可以繼承父類
class Human extend Animal

但是JS最初沒有extend這樣的語法糖,來實現(xiàn)子構(gòu)造函數(shù)繼承父構(gòu)造函數(shù)
所以,JS沒法用extend關(guān)鍵字來直接繼承,于是苦思冥想出了其他方法來模擬子類繼承父類
## 于是,我們學(xué)習(xí)JS是如何模擬子類繼承父類的
JS里沒有類,所以我們肯定看的是JS是如何讓子構(gòu)造函數(shù)繼承父構(gòu)造函數(shù)的
版本1: 讓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
      }
      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__不允許在生產(chǎn)環(huán)境使用,文檔明確有要求的,影響性能
版本2 : 不用__proto__,讓Soldier繼承Human
其實這個思路是很對的,JS肯定要用__proto__才能繼承。
現(xiàn)在的問題就是,我要用__proto__,但是JS不讓我用。
所以JS開發(fā)者就十分?jǐn)Q巴的用new來用__proto__,怎么用呢,看下面代碼:
Soldier.prototype.__proto__ = Human.prototype
改成
function Fn(){}

Fn.prototype = Human.prototype

Soldier.prototype = new Fn()

怎么解釋呢?

因為 Soldier.prototype是Fn構(gòu)造函數(shù)的實例,
所以 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);  


版本2.1: ES5提供Object.create()的語法糖,讓開發(fā)者避免借助new,這種擰巴的方式來用__proto__
介紹Object.create()

接收一個參數(shù)obj1,return一個結(jié)果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);