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

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

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

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

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

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

但是JS最初沒(méi)有extend這樣的語(yǔ)法糖,來(lái)實(shí)現(xiàn)子構(gòu)造函數(shù)繼承父構(gòu)造函數(shù)
所以,JS沒(méi)法用extend關(guān)鍵字來(lái)直接繼承,于是苦思冥想出了其他方法來(lái)模擬子類(lèi)繼承父類(lèi)
## 于是,我們學(xué)習(xí)JS是如何模擬子類(lèi)繼承父類(lèi)的
JS里沒(méi)有類(lèi),所以我們肯定看的是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.兵種 = "美國(guó)大兵"
      Soldier.prototype.攻擊 = function () {}
      Soldier.prototype.防御 = function () {}
      Soldier.prototype.死亡 = function () {}
  
      var soldier = new Soldier({name:"ziwei",膚色:"yellow",id:"8"})
      console.log(soldier);  

這個(gè)方案是OK的,問(wèn)題在于__proto__不允許在生產(chǎn)環(huán)境使用,文檔明確有要求的,影響性能
版本2 : 不用__proto__,讓Soldier繼承Human
其實(shí)這個(gè)思路是很對(duì)的,JS肯定要用__proto__才能繼承。
現(xiàn)在的問(wèn)題就是,我要用__proto__,但是JS不讓我用。
所以JS開(kāi)發(fā)者就十分?jǐn)Q巴的用new來(lái)用__proto__,怎么用呢,看下面代碼:
Soldier.prototype.__proto__ = Human.prototype
改成
function Fn(){}

Fn.prototype = Human.prototype

Soldier.prototype = new Fn()

怎么解釋呢?

因?yàn)?Soldier.prototype是Fn構(gòu)造函數(shù)的實(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.兵種 = "美國(guó)大兵"
      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()的語(yǔ)法糖,讓開(kāi)發(fā)者避免借助new,這種擰巴的方式來(lái)用__proto__
介紹Object.create()

接收一個(gè)參數(shù)obj1,return一個(gè)結(jié)果obj2
obj2會(huì)繼承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.兵種 = "美國(guó)大兵"
      Soldier.prototype.攻擊 = function () {}
      Soldier.prototype.防御 = function () {}
      Soldier.prototype.死亡 = function () {}
  
      var soldier = new Soldier({name:"ziwei",膚色:"yellow",id:"8"})
      console.log(soldier);