es6中如何實現繼承

本篇內容介紹了“es6中如何實現繼承”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在es6中，可利用class關鍵字配合extends關鍵字來實現繼承。ES6中引入了class關鍵字來聲明類， 而class（類）可通過extends來繼承父類中屬性和方法，語法“class 子類名 extends 父類名{...};”。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6中可利用class關鍵字配合extends關鍵字來實現繼承

在ES6中，class (類)作為對象的模板被引入，可以通過 class 關鍵字定義類。

es6繼承

Class 可以通過extends關鍵字實現繼承

class Animal {}
class Cat extends Animal { };

上面代碼中 定義了一個 Cat 類，該類通過 extends關鍵字，繼承了 Animal 類中所有的屬性和方法。 但是由于沒有部署任何代碼，所以這兩個類完全一樣，等于復制了一個Animal類。 下面，我們在Cat內部加上代碼。

class Cat extends Animal {
    constructor(name, age, color) {
        // 調用父類的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 調用父類的toString()
    }
}

constructor方法和toString方法之中，都出現了super關鍵字，它在這里表示父類的構造函數，用來新建父類的this對象。

需要注意的是：class 關鍵字只是原型的語法糖， JavaScript 繼承仍然是基于原型實現的。

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  showName() {
    console.log("調用父類的方法");
    console.log(this.name, this.age);
  }
}

// 定義一個子類
class Dog extends Pet {
  constructor(name, age, color) {
    super(name, age); // 通過 super 調用父類的構造方法
    this.color = color;
  }

  showName() {
    console.log("調用子類的方法");
    console.log(this.name, this.age, this.color);
  }
}

優點：

• 清晰方便
  

缺點：

• 不是所有的瀏覽器都支持 class。

“es6中如何實現繼承”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！