如何使用 JavaScript 中的 Classes（類） – JavaScript 完全手冊（2018版）
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
注：本文為 《 JavaScript 完全手冊（2018版） 》第12節，你可以檢視該手冊的完整目錄。
2015年，ECMAScript 6（ES6）標準引入了 Classes(類) 。
在此之前，JavaScript 只有一種非常獨特的方式來實現繼承。 它的原型繼承雖然在我看來很棒，但與其他流行的程式語言不同。
來自 Java 或 Python 或其他語言的人很難理解原型繼承的複雜性，因此 ECMAScript 委員會決定在它們之上引入一個語法糖，類似於基於類的繼承在其他流行的實現中工作。
這很重要：引擎下的 JavaScript 實現仍然相同，您可以平常的方式繼續訪問物件原型。
定義一個 class(類)
這是一個班級的 class(類) 。
class Person {
constructor(name) {
this.name = name
}
hello() {
return 'Hello, I am ' + this.name + '.'
}
}
一個類有一個識別符號，我們可以使用它來使用 new ClassIdentifier() 建立物件例項。上述例子中你可以使用 new Person('愚人碼頭') 來建立。
初始化物件時，將呼叫 constructor (建構函式) 方法，並傳遞一些引數。
一個類也有它需要的方法。 上述例子中， hello 是一個方法，可以在從該類派生的所有例項上呼叫：
const flavio = new Person('Flavio')
flavio.hello()
類的繼承
類可以擴充套件另一個類，使用該類初始化的例項物件繼承這兩個類的所有方法。
如果繼承的類具有與上層次結構中較高的類之一具有相同名稱的方法，則最接近的方法優先：
class Programmer extends Person {
hello() {
return super.hello() + ' I am a programmer.'
}
}
const flavio = new Programmer('Flavio')
flavio.hello()
上面的程式打印出 “Hello, I am Flavio. I am a programmer.”
類沒有顯式的類變數宣告，但必須初始化建構函式中所有的變數。
在類中，您可以呼叫 super() 來引用父類。
靜態方法
通常，方法是在例項上執行的，而不是在類上執行的。
靜態方法在類上執行：
class Person {
static genericHello() {
return 'Hello'
}
}
Person.genericHello() //Hello
私有方法
JavaScript 目前沒有內建的方法來定義私有或受保護的方法。目前有很多 hack 方式解決，但我不會在這裡描述它們。
值得注意的是 TC39 最近在 GitHub 上通過了一條 EMCAScript 語法特性的草案，即類私有屬性修飾符 # ，不過，該特性之前在社群的調研中遭遇了大量反對。例如：
class Shape {
#height;
#width;
constructor(width, height) {
this.#width = width;
this.#height = height;
}
get area() {
return this.#width * this.#height;
}
}
const square = new Shape(10, 10);
console.log(square.area);// 100
console.log(square instanceof Shape); // true
console.log(square.#width);// 錯誤：私有屬性只能在類中訪問
確實有點醜陋！本人更喜歡 TypeScript 的方式:
class Shape {
private width;
private height;
constructor(width, height) {
this.width = width;
this.height = height;
}
get area() {
return this.width * this.height;
}
}
const square = new Shape(10, 10)
console.log(square.area); // 100
getter 和 setter
您可以新增以 get 或 set 為字首的方法來建立 getter 和 setter，這兩個程式碼是根據您正在執行的操作執行的：訪問變數或修改其值。
class Person {
constructor(name) {
this.name = name
}
set name(value) {
this.name = value
}
get name() {
return this.name
}
}
如果您只有一個getter，則無法設定該屬性，並且將忽略任何嘗試這樣做：
class Person {
constructor(name) {
this.name = name
}
get name() {
return this.name
}
}
如果您只有一個setter，則可以更改該值，但不能從外部訪問它：
class Person {
constructor(name) {
this.name = name
}
set name(value) {
this.name = value
}
}
關於 Classes（類）的更多詳細資訊可以檢視 面向物件的 JavaScript – 深入瞭解 ES6 類