如何創建和使用 JavaScript 類 [示例]

本教程將解釋 JavaScript 類 以及它們與對象的關係 .提供語法和代碼示例。

但首先，快速回顧一下 JavaScript 對象。

JavaScript 對象

在 JavaScript 中，對像是一組屬性和方法的容器。

例如，可以將汽車建模為對象。它可能具有描述製造商的屬性 , 製作年份 ，以及顏色 .

方法是作為對像一部分的函數，當被調用時，會以某種方式與對象交互。一輛車可能有一個喇叭 觸發警報或驅動器的方法 改變其位置的方法。

var myHonda = {
    manufacturer: "honda",
    year: "2002",
    colour: "yellow"
};

在上面，創建了一個描述 2002 年黃色本田汽車的 JavaScript 對象。對象可以有任意數量或屬性和方法。

JavaScript 類

對像沒有嚴格的結構——屬性可以添加和刪除，或者存在於某些對像上而不存在於其他對像上。類提供了用於創建具有預設屬性列表的對象的模板，並且可以包含預設方法。

使用該類創建的所有對像都將具有可用的屬性和方法——填充該對象的唯一值

創建/定義類和屬性

類是一種函數——創建對象的函數。

每個類都應該有一個構造函數 方法。在使用類創建對象並設置類的屬性時調用此方法。構造函數中定義的屬性是該類的預定義屬性。

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
}

還有其他創建類的方法，如 Mozilla 開發者網絡文檔中所述。

類方法

方法，類中包含的函數，也可以添加到類定義中。它們使用標準的函數語法，可以簡單地列在類定義中的構造函數之後。

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
}

從類中創建對象

使用 new 創建新對象 關鍵字後跟類名，屬性按照它們在構造函數中定義的順序排列。

let myHonda = new Car("honda", "2002", "yellow");

以上將創建一個黃色的 2002 Honda 對象，該類Car .

類被設計為可重用，以創建行為相同的一致對象。您可以從一個類中創建任意數量的對象。

let myHonda = new Car("honda", "2002", "yellow");
let myToyota = new Car("toyota", "1987", "red");

使用“this”訪問對象自身的屬性？

從上面的構造函數中可以看出，當一個對象引用自己時，它使用 this 關鍵詞。 這個 不是指類，而是該類的單個對象。

在此處閱讀有關 JavaScript 中“this”的更多信息。

下面，添加了一個新方法，它使用了 this 更新汽車顏色：

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
    changeColour(colour){
        this.colour = colour;
    }
}