JavaScript 類
ECMAScript 2015，也稱為 ES6，引入了 JavaScript 類。
JavaScript 類是 JavaScript 物件的模板。
JavaScript 類語法
使用 class 關鍵字建立類。
始終新增一個名為 constructor() 的方法
語法
class ClassName {
constructor() { ... }
}
示例
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
上面的示例建立了一個名為“Car”的類。
該類有兩個初始屬性：“name”和“year”。
JavaScript 類不是一個物件。
它是一個 JavaScript 物件的模板。
使用類
當您有一個類時，您可以使用該類來建立物件
上面的示例使用 Car 類 來建立兩個 Car 物件。
在建立新物件時，建構函式方法會自動呼叫。
建構函式方法
建構函式方法是一個特殊的方法
- 它必須具有確切的名稱 "constructor"
- 在建立新物件時會自動執行
- 用於初始化物件屬性
如果不定義建構函式方法，JavaScript 將新增一個空的建構函式方法。
類方法
類方法使用與物件方法相同的語法建立。
使用 class 關鍵字建立類。
始終新增一個 constructor() 方法。
然後新增任意數量的方法。
語法
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
建立一個名為 "age" 的類方法，該方法返回汽車的年齡
示例
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
const date = new Date();
return date.getFullYear() - this.year;
}
}
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
你可以向類方法傳遞引數
示例
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
const date = new Date();
let year = date.getFullYear();
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
瀏覽器支援
下表定義了瀏覽器首次完全支援 JavaScript 中的 Classes 的版本
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| 2016 年 3 月 | 2015 年 7 月 | 2016 年 3 月 | 2015年10月 | 2016 年 3 月 |
你將在本教程後面學到更多關於 JavaScript Classes 的知識。
