2016年1月26日

[筆記] 談談JavaScript中的物件建立(Object) - Part 2 | 利用大括號{}建立物件

圖片來源:JavaScript 101

在上一篇文章中我們提到([筆記] JavaScript中的物件建立(Object) - Part 1),我們可以先使用"[ ]"和" . "來建立物件,在這篇文章中我們則會使用object literal syntax的方法,也就是使用"{ }"來快速又簡便的建立物件。

使用{ }建立物件

在上一篇文章的最後,我們主要是使用new Object()搭配上"."的方式來建立物件。


呼叫出來的結果長這樣:



但其實在建立物件上有更快的做法,我們可以直接使用{ },我們可以把上面的程式碼,改成這樣:


透過這種方式,可以得到一模一樣的結果。

STEP 1

首先,利用{ }建立物件:


STEP 2

接著,就可以依序輸入「名稱-值」的配對進去:


STEP 3

在物件中建立物件的方法也一樣,在{ }裡面再放入{ }就可以了!


同樣地,如果不想在person這個物件裡面,再多一層的{ },也可以透過這種寫法:


看自己習慣用怎樣的方法,還要怎麼樣建立物件在閱讀上比較容易理解。

搭配函式使用物件



在我們建立好物件後,我們可以搭配函式(function)來使用物件,例如,我先把剛剛建立的物件person,改成叫做PJCHENder。


接著建立一個名稱為SayHI的函式,並且帶入我們的物件:


這時候,該函式就可以直接呼叫出物件裡面屬性的值:


直接在函式參數的地方建立物件



我們也可以直接在呼叫函式的同時建立物件,像是這樣子:


一開始看到這樣的寫法可能會覺得很奇怪,但其實這種方式和我們直接在函式的參數裡面輸入字串或數值是一樣的意思,只是這裡是建立一個物件。我們把這種直接在函式的參數中建立物件的方法稱做"creating object on the fly"。

一樣可以順利的回傳結果:



→回到此系列文章目錄

其他說明

不論你使用的是new Object、" . "、或者直接用"{ }"來建立物件,其實在JavaScript轉譯之後,本質上做的都是同樣的事。它都會將這個物件建立在記憶體中,並建立該物件的屬性(property)和方法(method)在記憶體中。

資料來源

0 意見:

張貼留言