Java

Javascript入門教室18-創造物件

2020-02-18

入門教室除了讓你Javascript物件,還要教你如何創建它!快學起來吧!

入門教室除了讓你Javascript物件,還要教你如何創建它!快學起來吧!
入門教室除了讓你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入門磚7條件式

 

Javascript入門必學8條件判斷式

 

Javascript入門教室9-for迴圈

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料