JavaScript繼承詳解

一、ES6中的繼承

ES6中提供了完整的類系統，並且支持extends關鍵字來實現繼承。在ES6之前，JavaScript並沒有原生的面向對象的類系統，類的概念只是通過函數和原型繼承來模擬的。下面是一個ES6中繼承的示例代碼：

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); 
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); //輸出：Mitzie barks.

在以上示例中，我們定義了一個Animal類和一個Dog類，Dog類從Animal類中繼承了構造函數、屬性和方法，並重寫了speak方法。在創建Dog實例時，我們通過new關鍵字創建了一個Dog實例，然後調用其speak方法。

二、原型鏈繼承

原型鏈是JavaScript中實現繼承的主要方式之一。通過原型鏈，我們可以將一個對象的屬性和方法繼承到另一個對象中。我們將創建一個父類Person和一個子類Student並繼承Person的示例代碼。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.eat = function() {
  console.log(this.name + ' eat something.');
}

function Student(name, age, grade) {
  this.grade = grade;
  Person.call(this, name, age);
}

Student.prototype = new Person();
Student.prototype.constructor = Student;

Student.prototype.study = function() {
  console.log(this.name + ' study in ' + this.grade + ' grade.');
}

let s = new Student('John', 18, 5);
s.eat(); //輸出：John eat something.
s.study(); //輸出：John study in 5 grade.

在以上示例中，Person是一個父類，Student繼承了Person並添加了一個study方法。通過調用Person.call方法，我們將Person的屬性綁定到Student對象上然後用Student的prototype指向Person的實例，以便子類可以共享父類的屬性和方法。

三、構造函數繼承

通過構造函數繼承，我們可以在子類中調用父類的構造函數，並將父類的屬性和方法添加到子類的實例中。下面是構造函數繼承的示例代碼。

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log('This is ' + this.name + '.');
}

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

let d = new Dog('Mitzie', 'Dalmatian');
console.log(d.name); //輸出：Mitzie
console.log(d.breed); //輸出：Dalmatian
d.speak(); //報錯，因為speak方法不是Dog類的原型方法

在以上示例中，我們定義了一個Animal類和一個Dog類，並用Animal.call方法來實現繼承。通過調用父類的構造函數，我們將父類的屬性綁定到子類對象上，以便子類可以共享父類的屬性和方法。

四、組合繼承

組合繼承是將上面兩種方式結合起來使用。在組合繼承中，我們通過構造函數繼承來繼承父類的屬性，然後通過原型鏈繼承來繼承父類的方法。下面是組合繼承的示例代碼。

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log('This is ' + this.name + '.');
}

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

let d = new Dog('Mitzie', 'Dalmatian');
console.log(d.name); //輸出：Mitzie
console.log(d.breed); //輸出：Dalmatian
d.speak(); //輸出：This is Mitzie.

在以上示例中，我們通過Animal.call來實現構造函數繼承，然後通過Dog.prototype = new Animal()來實現原型鏈繼承。通過這兩種方式，我們可以繼承父類的屬性和方法。

五、ES6中的Super

在ES6的類系統中，我們可以使用super關鍵字來調用父類的構造函數和方法。在以下示例中，我們將用super關鍵字創建一個Animal類，並在Dog類中繼承Animal，並調用父類的構造函數和方法。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log('This is ' + this.name + '.');
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie', 'Dalmatian');
console.log(d.name); //輸出：Mitzie
console.log(d.breed); //輸出：Dalmatian
d.speak(); //輸出：This is Mitzie.
d.bark(); //輸出：Mitzie barks.

在以上示例中，我們通過super關鍵字調用了Animal的構造函數，然後通過super.speak()調用了Animal的speak方法。這個語法糖方便了我們在ES6中實現繼承。

六、總結

JavaScript中有多種實現繼承的方式，每種方式都有其優缺點，我們需要根據具體的應用場景來選擇實現方式。ES6中提供了完整的類系統和super關鍵字，方便了我們進行繼承。