2016年1月25日 星期一

[筆記] 物件是什麼?method是什麼?談談JavaScript中的物件建立(Object) - Part 1

圖片來源:JavaScript 101

在這篇文章中會說明如何建立JavaScript裡面的物件(Object)。

物件(object)是什麼


首先,我們要知道物件是什麼。物件簡單來說,就是一堆「名稱-值」的配對(a collection of name value pairs)。至於可以放入哪些值呢?

第一種是原生的值(primitive ),像是布林值(Boolean)、數值或是字串,而在物件當中,我們把這類的值稱做屬性(Property)

第二種可以放入的值,是物件,也就是在一個物件裡面再嵌入一個物件,這種以物件為值的情況我們也把它稱作屬性(Property)

第三種放入的值可以是函數(function),在物件的情況下,我們會把這種函式/函數稱做方法(method)

在物件中的每一個Property或是Method都會占據電腦當中一個記憶體的位置,在需要使用到的時候,把它們呼叫出來。

方法一:使用[ ]

建立物件

建立物件的第一個方法是使用"[ ]","[ ]"在JavaScript中被稱做Computed Member Access。



讓我們看一下例子:


這是利用"[ ]"建立物件的方法,首先我們建立一個物件,名為person,接著開始給它「名稱-值」配對,例如,firstname是屬性的名稱,PJ則是它的值;lastname也是屬性名稱,CHENder則是它的值。透過這種方法,我們就可以建立物件裡面的各種「名稱-值」配對。

呼叫物件

我們也同樣可以利用"[ ]"來呼叫已經建立好的物件,[ ]裡面如果放的是字串而不是變數,要記得加上引號 "像是這樣:


另外,如果是透過"[ ]"來呼叫物件的話,還有一個特別的地方,就是[ ]內可以放變數,像是這樣(當[ ]裡面放的是變數時不用加引號"),一樣可以讀取到物件的值,這個是用種方法二(".")做不到的:


方法二:使用"."

建立物件

第二種建立物件的方法是使用英文的句點".",在JavaScript中被稱做Member Access,建立的方法如下,我們在剛剛建立的person這個物件裡面,在建立一個物件屬性,名稱為address。其實,我覺得可以把"."翻譯成中文的「的」,所以這裡的意思就是,在person的裡面建立一個名稱為address的物件;在person的address的country,建立一個值
為"Taiwan",以此類推...。


呼叫物件

同樣的方法也可以用來呼叫出該物件的值


當然,"."和"[ ]"是可以交替使用的。

其他說明


在這段課程中,Anthony Alicea提到使用new Object不是建立物件最好的方式,這點會在之後的課程再作說明。另外,雖然使用"[ ]"和" . "都可以拿來建立物件和讀取物件,但他還是建議盡量使用" . "做為建立物件和呼叫物件的方法,這樣比較乾淨簡潔,在debug的時候也比較容易。

程式碼

// 建立物件
var person = new Object();
person["firstname"] = "PJ";
person["lastname"] = "CHENder";

// 呼叫物件

var whatIwant = "lastname"
console.log(person[whatIwant]); // CHENder

// 建立物件
person.address   = new Object();
person.address.country = "Taiwan";
person.address.city  = "Taipei";
person.address.locate = "101";

// 呼叫物件
console.log(person.address);
console.log(person.address.country);
console.log(person["address"]["locate"]);
→回到此系列文章目錄

資料來源

Share:

0 意見:

張貼留言