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。

【相關推薦：javascript影片教學、web前端】

#

以上是es6中實作繼承的方式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！