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 方法。

Constructor 方法

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

  • 它必須擁有確切名稱的“構造函數”
  • 創建新對象時自動執行
  • 用于初始化對象屬性
  • 如果未定義構造函數方法，JavaScript 會添加空的構造函數方法。

Class 方法

類方法的創建

語法

與對象方法相同。

請使用關鍵字 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 月

在本教程的后面，您將學到更多關于 JavaScript 類的知識。