iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
0

前一篇文章說到 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

上一篇
Day 17: 物件繼承
下一篇
Day 19: getter & setter
系列文
JavaScript 忍者的修練--從下忍進階到中忍30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言