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 中的類的瀏覽器版本
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| 2016 年 3 月 | 2015 年 7 月 | 2016 年 3 月 | 2015 年 10 月 | 2016 年 3 月 |
"use strict"
類中的語法必須寫成 "strict mode"（嚴格模式）。
如果不遵循 "strict mode" 規則，將會報錯。
示例
在 "strict mode" 下，如果使用未宣告的變數，將會報錯。
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
const date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
自己動手試一試 »
有關 "strict mode" 的更多資訊，請參閱：JS Strict Mode。
