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 對象的模板。

使用類

當您有了一個類時，可以使用該類來創建對象：

實例

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

親自試一試

上面的例子使用 Car 類來創建兩個 Car 對象。

在創建新對象時會自動調用構造方法（constructor method）。

構造方法

構造方法是一種特殊的方法：

  • 它必須有確切的名稱的 “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() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let 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;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";

親自試一試

瀏覽器支持

下表注明首個完全支持 JavaScript 類的瀏覽器版本：

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
2016 年 3 月 2015 年 7 月 2016 年 3 月 2015 年 10 月 2016 年 3 月

"use strict"

類中的語法必須以“嚴格模式”編寫。

如果您不遵循“嚴格模式”規則，將收到錯誤消息。

實例

在“嚴格模式”下，如果您使用變量而不聲明它，會得到錯誤：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // This will not work
    let date = new Date(); // This will work
    return date.getFullYear() - this.year;
  }
}

親自試一試

在 JS 嚴格模式 中學習更多關于“嚴格模式”的內容。