[JS奇怪的世界]No.57 ES6與類別

前言

這章節主要講解 ES6(JavaScript EcmaScript 2015 或 EcmaScript 6) 的部分,而這章節將講解 ES6 另一種建立物件與設定原型的方法。

class 在其他程式語言是非常受歡迎的,可以用來定義物件的方法、屬性等該做什麼,但前面有講過 JavaScript 本身並沒有類別 (class)。

ES6與類別

那類別看起來像什麼?

1
2
3
4
5
6
7
8
9
10
11
12
13
class Person {
constructor (firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
greet() {
return 'Hi' + this.firstname;
}
}

var john = new Person('John', 'Doe');
console.log(john);
console.log(john.greet());

基本上與原本在寫函數建構子一樣,所以做法完全沒有太大差異。

Image

但是這邊要注意一件事情 JavaScript 的 class 與其他程式語言不同,用 class 建立的內容它還是一個物件

Image

class Person 其實就是在建立一個物件。

如何設定原型?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Person {
constructor (firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
greet() {
return 'Hi' + this.firstname;
}
}

class InformalPerson extends Perosn {
constructor (firstname, lastname) {
super(firstname, firstname);
}
greet() {
return 'Yo!' + this.firstname;
}
}

var john = new Person('John', 'Doe');
console.log(john);
console.log(john.greet());

透過 extends 可以將 InformalPerson 設定為 Perosn 的原型。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ