JavaScript extends 繼承

ES2015新增class類，使其更加接近標準面嚮物件語言，最起碼從外觀上更加相像。

與之相配套，新增extends關鍵字用於實現繼承，與標準物件導向極為相似。

JavaScript實現繼承的方式有多種，參閱JavaScript class 類繼承一章節。

關於class 類的用法參閱JavaScript class 類一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
class ChildClass extends ParentClass {
  // code
}

extends關鍵字在建立類時實現對另一個類的繼承，也就是說新類是另一個類的子類。

引數解析：

（1）.ChildClass：必需，新建立的類。

（2）.ParentClass ：必需，它是ChildClass的父類。

（3）.code：可選，程式碼屬於子類。

程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone{
  constructor(webName,address){
    this.webName = webName;
    this.address = address;
  }
  showInfo(){
    console.log(`${this.webName}位於${this.address}`);
  }
}

class ChildClass extends Antzone {
}
let child=new ChildClass("螞蟻部落", "青島市南區");
child.showInfo();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.程式碼的目的是建立ChildClass類。

（2）.它繼承自父類Antzone 。

（3）.由於子類沒有任何程式碼，所以它就是一份父類的拷貝。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,address){
  this.webName = webName;
  this.address = address;
  this.showInfo=function(){
    console.log(`${this.webName}位於${this.address}`);
  }
}

class ChildClass extends Antzone {
}
let child=new ChildClass("螞蟻部落", "青島市南區");
child.showInfo();

程式碼執行效果截圖如下：

可以看到父類是一個函式，而不是類，也是完全可以的。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone{
  constructor(webName,address){
    this.webName = webName;
    this.address = address;
  }
  showInfo(){
    console.log(`${this.webName}位於${this.address}`);
  }
}

let ChildClass = class extends Antzone {
}
let child=new ChildClass("螞蟻部落", "青島市南區");
child.showInfo();

程式碼執行效果截圖如下：

上述程式碼同樣可以正常執行，建立子類的時候採用表示式方式而不是類宣告方式。

關於表示式方式建立類可以參閱JavaScript class 類一文的中後半部分。

是不是程式碼看起來有點奇葩，還是建議採用宣告方式建立class 類。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class ParentClass {
  constructor(webName,age) {
    this.webName = webName;
    this.age = age;
  }
  func() {
    console.log("螞蟻部落父類");
  }
}
class ChildClass extends ParentClass {
  constructor(webName, age, address) {
    super(webName, age);
    this.antzone = "本站名稱是" + this.webName + ",成立" + age + "年了,位於" + address;
  }
  done() {
    super.func();
  }
}
let childClass = new ChildClass("螞蟻部落", 6, "青島市南區");
console.log(childClass.antzone);
childClass.done();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.建立名稱為ParentClass的類作為父類。

（2）.然後再建立類ChildClass，並且利用extends關鍵字繼承ParentClass。

（3）.子類ChildClass建構函式中，存在super函式的呼叫，這是一個重點內容，作用會逐條介紹。

（4）.子類建構函式中的super表示父類ParentClass的建構函式，用於建立父類的this，父類的屬性和方法都位於this之上。

（5）.然後在父類this基礎上加工子類自身的 this，於是實現了繼承。

（6）.所以在子類應用this之前，必須首先呼叫super函式。

（7）.最終，子類的物件例項可以呼叫繼承自父類的方法或者屬性。

特別說明：上面僅介紹了super部分功能，更多內容參閱JavaScript super一章節。

上面的程式碼都是繼承自自定義的類或者建構函式，當然也可以繼承自內建的。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class ChildClass extends Date {
}
let child=new ChildClass();
console.log(child.getFullYear());

程式碼執行效果截圖如下：

上述程式碼成功實現對內建的建構函式（類）實現了繼承。

[JavaScript] 純文字檢視 複製程式碼
class ChildClass extends null {
  constructor() {}
}
let child=new ChildClass();

程式碼執行效果截圖如下：

因為父類是一個null，自然沒有建構函式，也就無法建立this。

那麼子類也就無法建立自己的this，所以導致報錯。

最後再強調一下，extends只是繼承的一部分內容，更多內容參閱JavaScript class 類繼承一章節。