/

JavaScript中的`super`關鍵字

JavaScript中的super關鍵字

在JavaScript中使用類別時，使用super關鍵字是很常見的。

在本文中，我想要澄清它的用途。

假設我們有一個名為Car的類別：

1
2
3
class Car {

}

並且在這個類別中，我們有一個constructor()方法：

1
2
3
4
5
class Car {
 constructor() {
 console.log('這是一輛汽車')
 }
}

這個constructor方法是特別的，因為它在類別被實例化時被執行：

1
const myCar = new Car() //'這是一輛汽車'

你可以有一個Tesla類別，它擴展了Car類別：

1
2
3
class Tesla extends Car {

}

Tesla類別繼承了Car的所有方法和屬性，包括constructor方法。

我們可以創建一個Tesla類別的實例，創建一個新的myCar物件：

1
const myCar = new Tesla()

原本在Car中的constructor仍然會被執行，因為Tesla類別沒有自己的constructor。

我們可以在Tesla類別中覆寫constructor()方法：

1
2
3
4
5
class Tesla extends Car {
 constructor() {
 console.log('這是一輛特斯拉')
 }
}

和

1
const myCar = new Tesla()

會印出這是一輛特斯拉。

在constructor()方法中，我們也可以呼叫super()來調用父類別中的同名方法：

1
2
3
4
5
6
class Tesla extends Car {
 constructor() {
 super()
 console.log('這是一輛特斯拉')
 }
}

呼叫

1
const myCar = new Tesla()

現在會執行2個console log。首先是在Car類別constructor中定義的，第二個是在Tesla類別constructor中定義的：

1
2
'這是一輛汽車'
'這是一輛特斯拉'

請注意，super()只能在constructor中呼叫，不能在其他方法中使用。

如果constructor接受參數，我們也可以傳入任意參數。