JavaScript入門教學看這裡!(18)創造物件

看完關於JavaScript物件的介紹,至於要如何創建它們,就交給這篇了!

物件建構式（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. 物件：name；屬性：Valention Rossi
2.物件：nationality；屬性：Italy
3. 物件：team；屬性：Monster Energy Yamaha MotoGP
4. 物件：BikeNo；屬性：46

b2 的哪個屬性被分配（對應）給哪個物件名稱，也如同上述的形式：
1. 物件：name；屬性：Valention Rossi
2. 物件：nationality；屬性：Marc Márquez
3. 物件：team；屬性：Repsol Honda Team
4. 物件：BikeNo；屬性：93

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




相關文章：

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

AI 產業革命開始！為何 Python 成人工智慧必備語言？

為什麼學習網頁前端一定要掌握JavaScript？

JavaScript入門教學看這裡!(17)物件介紹

免費的Java開發工具,看這裡就知道!

還不曉得JavaScript有多強大?看完這篇馬上被說服!