前一篇文章說到 JavaScript 沒有類別(class)的設計,是用原型實現類別的效果。不過在 ES6 裡卻新增了 class
關鍵字,讓我們可以用新的語法來建立物件和實現繼承。但是要注意的是,class
只是一種語法糖衣,實際上 JavaScript 還是會轉化成原型的語法,只是讓開發者們能稍微方便一點。
// 首先定義類別名稱
class Pikachu {
// constructor 函式在建立 instance 時會呼叫,裡面的屬性會被寫入 instance
constructor(name) {
this.name = name;
this.type = "electric";
}
// 定義一個所有 instance 都能存取的方法
thunderShock() {
return true;
}
}
// 使用 new 來建立新 instance,可代入參數
const pikachu = new Pikachu("Ryan");
// 以下的測試皆通過
console.log(pikachu instanceof Pikachu); // true
console.log(pikachu.name === "Ryan"); // true
console.log(pikachu.thunderShock()); // true
上面的寫法如果改成原型的寫法會是這個樣子:
function Pikachu(name) {
this.name = name;
this.type = "electric";
}
Pikachu.prototype.thunderShock = function() {
return true;
};
到現在為止我們在類別當中建立的方法都是 instance 可以取用的方法,作法是將方法建立在prototype
。在類別物件上也可以有自己的方法,只有呼叫類別物件才能使用,在程式設計裡叫靜態方法(static method)。
在 class
裡要建立靜態方法,只要在名稱前面加上static
關鍵字就可以了。
前一天我們為了要在原型裡實現物件繼承,費了很大的力氣,變更了新類別的原型對象,同時也弄壞了constructor
,還要找方法修複它。這一切在 ES6 裡簡單多了。只要使用關鍵字extends
來繼承其他類別。
class Pokemon() {
constructor(name) {
this.name = name;
}
fight() {
return true;
}
}
class Pikachu extends Pokemon {
constructor(name, accessory) {
super(name);
this.accessory = accessory;
}
thunderShock = function() {
return true;
};
}
const pikachu = new Pikachu("Ryan", "Ash's hat");
console.log(pikachu instanceof Pokemon); // true
console.log(pikachu instanceof Pikachu); // true