Js實現繼承的6種方式

JavaScript想實現繼承的目的：重複利用另外一個物件的屬性和方法。

1.原型鏈繼承

讓一個建構函式的原型是另一個型別的範例，那麼這個建構函式new出來的範例就具有該範例的屬性。

當試圖存取一個物件的屬性時，它不僅僅在該物件上搜尋，還會搜尋該物件的原型，以及該物件的原型的原型，依次層層向上搜尋，直到找到一個名字匹配的屬性或到達原型鏈的末尾。

function Parent() {
   this.isShow = true
   this.info = {
       name: "mjy",
       age: 18,
   };
}

Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow);
}

function Child() {};
Child.prototype = new Parent();

let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo(); // {name: 'mjy', age: 18, gender: '男'} ture

let child2 = new Child();
child2.isShow = false
console.log(child2.info.gender) // 男
child2.getInfo(); // {name: 'mjy', age: 18, gender: '男'} false

優點：寫法方便簡潔，容易理解。

缺點：物件範例共用所有繼承的屬性和方法。傳教子型別範例的時候，不能傳遞引數，因為這個物件是一次性建立的（沒辦法客製化化）。

2.借用建構函式繼承

function Parent(gender) {
  this.info = {
    name: "yhd",
    age: 19,
    gender: gender
  }
}

function Child(gender) {
    Parent.call(this, gender)
}

let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
console.log(child1.info);

let child2 = new Child('女');
console.log(child2.info);

在子型別建構函式的內部呼叫父類別型建構函式；使用 apply() 或 call() 方法將父物件的建構函式繫結在子物件上。

優點：解決了原型鏈實現繼承的不能傳參的問題和父類別的原型共用的問題。

缺點：借用建構函式的缺點是方法都在建構函式中定義，因此無法實現函數複用。在父類別型的原型中定義的方法，對子型別而言也是不可見的，結果所有型別都只能使用建構函式模式。

3.組合繼承（經典繼承）

將 原型鏈 和 借用建構函式 的組合到一塊。使用原型鏈實現對原型屬性和方法的繼承，而通過借用建構函式來實現對範例屬性的繼承。這樣，既通過在原型上定義方法實現了函數複用，又能夠保證每個範例都有自己的屬性

function Person(gender) {
  console.log('執行次數');
  this.info = {
    name: "mjy",
    age: 19,
    gender: gender
  }
}

Person.prototype.getInfo = function () {   // 使用原型鏈繼承原型上的屬性和方法
  console.log(this.info.name, this.info.age)
}

function Child(gender) {
  Person.call(this, gender) // 使用建構函式法傳遞引數
}

Child.prototype = new Person()

let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
child1.getInfo()
console.log(child1.info);

let child2 = new Child('女');
console.log(child2.info);

優點就是解決了原型鏈繼承和借用建構函式繼承造成的影響。

缺點是無論在什麼情況下，都會呼叫兩次超型別建構函式：一次是在建立子型別原型的時候，另一次是在子型別建構函式內部

4.原型式繼承

方法一：借用建構函式

在一個函數A內部建立一個臨時性的建構函式，然後將傳入的物件作為這個建構函式的原型，最後返回這個臨時型別的一個新範例。本質上，函數A是對傳入的物件執行了一次淺複製。

function createObject(obj) {
  function Fun() {}
  Fun.prototype = obj
  return new Fun()
}

let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}

let child1 = createObject(person)
child1.name = 'xxxy'
child1.hoby.push('rap')
let child2 = createObject(person)

console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

方法二：Object.create()

Object.create() 是把現有物件的屬性，掛到新建物件的原型上，新建物件為空物件

ECMAScript 5通過增加Object.create()方法將原型式繼承的概念規範化了。這個方法接收兩個引數：作為新物件原型的物件，以及給新物件定義額外屬性的物件（第二個可選）。在只有一個引數時，Object.create()與這裡的函數A方法效果相同。

let person = {
  name: 'mjy',
  age: 19,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is: ', this.name)
  }
}

let child1 = Object.create(person)
child1.name = 'xxt'
child1.hoby.push('rap')
let child2 = Object.create(person)

console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

優點是：不需要單獨建立建構函式。

缺點是：屬性中包含的參照值始終會在相關物件間共用，子類範例不能向父類別傳參

5.寄生式繼承

寄生式繼承的思路與(寄生) `原型式繼承` 和 `工廠模式` 似, 即建立一個僅用於封裝繼承過程的函數,該函數在內部以某種方式來增強物件,最後再像真的是它做了所有工作一樣返回物件。

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}

function createAnother(obj) {
  let clone = objectCopy(obj);
  clone.showName = function () {
    console.log('my name is：', this.name);
  };
  return clone;
}

let person = {
     name: "mjy",
     age: 18,
     hoby: ['唱', '跳']
}

let child1 = createAnother(person);
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
child1.showName(); // my name is： mjy

let child2 = createAnother(person);
console.log(child2.hoby); // ['唱', '跳', 'rap']

優點：寫法簡單，不需要單獨建立建構函式。

缺點：通過寄生式繼承給物件新增函數會導致函數難以重用。使用寄生式繼承來為物件新增函數, 會由於不能做到函數複用而降低效率;這一點與建構函式模式類似.

6.寄生組合式繼承

前面講過，組合繼承是常用的經典繼承模式，不過，組合繼承最大的問題就是無論什麼情況下，都會呼叫兩次父類別建構函式；一次是在建立子型別的時候，一次是在子型別的建構函式內部。寄生組合繼承就是為了降低父類別建構函式的開銷而實現的。

通過借用建構函式來繼承屬性，通過原型鏈的混成形式來繼承方法。本質上，就是使用寄生式繼承來繼承超型別的原型，然後再將結果指定給子型別的原型。

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}

function inheritPrototype(child, parent) {
  let prototype = objectCopy(parent.prototype);
  prototype.constructor = child;
  Child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
  this.hoby = ['唱', '跳']
}

Parent.prototype.showName = function () {
  console.log('my name is：', this.name);
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);
Child.prototype.showAge = function () {
  console.log('my age is：', this.age);
}

let child1 = new Child("mjy", 18);
child1.showAge(); // 18
child1.showName(); // mjy
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']

let child2 = new Child("yl", 18);
child2.showAge(); // 18
child2.showName(); // yl
console.log(child2.hoby); // ['唱', '跳']

優點是：高效率只呼叫一次父建構函式，並且因此避免了在子原型上面建立不必要，多餘的屬性。與此同時，原型鏈還能保持不變；缺點是：程式碼複雜

7.ES6、Class實現繼承

原理ES5 的繼承，實質是先創造子類的範例物件this，然後再將父類別的方法新增到this上面（Parent.apply(this)）。 ES6 的繼承機制完全不同，實質是先將父類別範例物件的屬性和方法，加到this上面（所以必須先呼叫super方法），然後再用子類別建構函式修改this

優點：語法簡單易懂,操作更方便。缺點：並不是所有的瀏覽器都支援class關鍵字 lass Per