JavaScript入門教學#18｜創造JavaScript物件(Objects)

物件建構式（object constructor）

在上一課中，我們使用物件（object）初始值（initializer）語法來創建了一些 JavaScript 物件。

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

以上的 JavaScript例子只建立了單一的「person」。有時前端工程師也需要設定「物件種類（object type）」來創建單一種類的多個物件

此時前端工程師可以使用「物件建構式（object constructor）」創建「物件種類（object type）」。範例如下：

See the Pen JavaScript 18-Objects-Constructor-1 by Tedutw (@Tedutw) on CodePen.

上述的函式「function person」就是一個物件建構式（object constructor）：接受 name、nationality、team、BikeNo 這 4 個參數並且指派這 4 個參數為物件的屬性。

上述例子的關鍵字「this」是指當前的物件。注意 this 不具有變數的屬性（因為其值不能改變），僅僅是一個關鍵字。

創造物件

一旦有了物件建構式（object constructor）之後，就可以使用關鍵字「new」來創建同一種類型（type）的新物件（new objects）

See the Pen JavaScript 18-Objects-Constructor-2 by Tedutw (@Tedutw) on CodePen.

在上述的例子， b1 與 b2 皆為「biker」類型的新物件。這些物件含有多個屬性，這些屬性被分配給對應的值。例如 b1 的 "Valention Rossi" 被分配給 "name" 屬性。

上述例子中，b1 的屬性名稱與值的對應分別列表如下：

1. 屬性值：Valention Rossi；屬性：name
2. 屬性值：Italy；屬性：nationality
3. 屬性值：Monster Energy Yamaha MotoGP；屬性：team
4. 屬性值：46；屬性：BikeNo

b2 的屬性名稱與值的對應分別列表如下：

1. 屬性值：Valention Rossi；屬性：name
2. 屬性值：Marc Márquez；屬性：nationality
3. 屬性值：Repsol Honda Team；屬性：team
4. 屬性值：93；屬性：BikeNo

照著以上的語法，多練習幾遍，相信你會很快熟悉如何在 JavaScript 中快速建立新的物件屬性