前言
這章節主要講解 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 奇怪的部分