JavaScript 入門：類別的 extends 與 super 是什麼?

前一篇文章簡單的介紹了 JavaScript 中的 class 以及他的語法，本篇文章將延續上一篇的基礎，進一步深入介紹：

• extends 如何建立繼承關係
• super() 在建構子中的角色
• super.method() 如何搭配覆寫（override）使用
• 以及 class 背後真正的 prototype 運作原理

class 語法

• 用 class 關鍵字宣告一個類別，建構函式與方法寫在大括號 {} 中
• 用 new 關鍵字創建一個類別實例
• obj.method() 呼叫方法

class Person{
	constructor(name, age){
		this.name = name;
		this.age = age;
	}
	greet(){
		console.log(`Hi, I'm ${this.name}. I'm ${this.age} years old.`)
	}​
}

const elaine = new Person("Elaine", 18);
​elaine.greet(); // Hi, I'm Elaine. I'm 18 years old.

extends

「繼承」代表著「is-a」的關係，學生是個人、上班族是個人，這種關係都可以用繼承。

被繼承的類別叫做父類別或是基類，繼承而來的類別則是叫做子類別。

class Person{
	constructor(name, age){
		this.name = name;
		this.age = age;
	}
	greet(){
		console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
	}​
}

// Student 繼承 Person
class Student extends Person{
	introduce(){
		console.log(`I'm a student!`);
	}
}

• 子類別可以使用父類別的方法，也可以定義自己的方法。

const elaine = new Student("Elaine", 18);
elaine.greet(); // Hi, I'm Elaine, 18 years old.
elaine.introduce(); // I'm a student!

extends 實際上做的是：
1. Object.setPrototypeOf(Student.prototype, Person.prototype)
2. Object.setPrototypeOf(Student, Person)，因此子類別也會繼承父類別的靜態方法

super

super 有兩種用法：(1) 調用父類別的建構子 (2)在子類別中呼叫父類別方法

(1) super() 調用父類別的建構子

如果想在子類別的 constructor 中使用 this 關鍵字，必須先調用 super() 方法。

super() 會執行父類別的 constructor，並初始化子類別的 this。

class Student extends Person{
	constructor(name, age, major){
  	// 呼叫 super()
		super(name, age);
		this.major = major;
	}
	introduce(){
		console.log(`I'm a ${this.major} student!`);
	}
}
const elaine = new Student("Elaine", 18, "Computer Science");
elaine.greet(); // Hi, I'm Elaine, 18 years old.
elaine.introduce(); // I'm a Computer Science student!

為何要呼叫 super()

因為子類別的實例同時也是父類別的實例，當我們實例化一個 Student 物件，其實是建立一個 Person 型別的物件，再加上一點 Student 自己的行為。

new Student("Elaine", 18, "Computer Science")

子類別的 constructor 叫做 derived constructor，這種建構子的特殊規則是不能建立自己的 this，必須呼叫 super()，才能取得初始化後的 this。

(2) 用 super.method() 呼叫父類別方法

super.method() 用來在子類別中呼叫父類別 prototype 上的方法，常會搭配覆寫(override) 一起使用，讓子類別在擴充父類別行為時保有原本的邏輯。

覆寫(override) 是在子類別中定義一個與父類別同名的方法。

如果想在子類別擴充父類別的方法，可以先用 super.method() 呼叫父類別的方法，再加入子類別自己的內容：

class Student extends Person{
	constructor(name, age, major){
		super(name, age);
		this.major = major;
	}
	greet(){ // 宣告同名方法 ⭢ 覆寫
		// 在子類別中呼叫父類別的 greet() 方法
	  super.greet();
	  // 加入子類別自己的行為
		console.log(`I'm a ${this.major} student!`);
	}
}
const elaine = new Student("Elaine", 18, "Computer Science");
elaine.greet(); // Hi, I'm Elaine, 18 years old. I'm a Computer Science student!

總結

ES6 的 class 語法讓 JavaScript 看起來更像傳統物件導向語言，但本質上仍然是基於 prototype 的繼承機制。

• class 本質上仍是 function
• extends 建立的是 prototype chain
• super() 的作用是初始化子類別的 this
• super.method() 則是讓子類別可以在覆寫時保留父類別的邏輯