2016年1月25日

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

img
在這篇文章中我們將會說明如何建立 JavaScript 裡的物件(Object)

物件(Object)是什麼?

首先,我們要知道物件是什麼。**物件(Object)**簡單來說,就是一堆「名稱 - 值」的配對(key - value pairs)。至於可以放入哪些值呢?
第一種是原生的值(primitive),像是布林值(Boolean)、數值(Number)或是字串(String),而在物件當中,我們把這類的值稱做屬性(Property)。
第二種可以放入的值是物件(Object),也就是在一個物件裡面再嵌入一個物件,這種以物件為值的情況我們也把它稱作屬性(Property)。
第三種放入的值可以是函數(function),在物件的情況下,我們會把這種函式稱做方法(method)。 在物件中的每一個 Property 或是 Method 都會占據電腦當中一個記憶體的位置,在需要使用到的時候,把它們呼叫出來。

方法一:使用 bracket notation [ ]

建立物件

建立物件的第一個方法是使用 [ ][ ] 在 JavaScript 中被稱做 Computed Member Access
讓我們看一下例子:
這是利用 [ ] 建立物件的方法,首先我們建立一個物件,名為 person,接著開始給它「名稱 - 值」配對,例如,firstName 是屬性的名稱,PJ 則是它的值;lastName 也是屬性名稱,CHENder 則是它的值。透過這種方法,我們就可以建立物件裡面的各種「名稱 - 值」配對。

呼叫物件

我們也同樣可以利用 [ ] 來呼叫已經建立好的物件,[ ] 裡面如果放的是字串而不是變數,要記得加上引號 ' 像是這樣:
另外,如果是透過 [ ] 來呼叫物件的話,還有一個特別的地方,就是 [ ] 內可以放變數,像是這樣(當 [ ] 裡面放的是變數時不用加引號"),一樣可以讀取到物件的值,這個是用種方法二(.)做不到的:

方法二:使用 dot notation .

建立物件

第二種建立物件的方法是使用英文的句點 .,在 JavaScript 中被稱做 Member Access,建立的方法如下:我們在剛剛建立的 person 這個物件裡面,在建立一個物件屬性,名稱為 address。其實,我覺得可以把 . 翻譯成中文的「的」,所以這裡的意思就是,在 person 的裡面建立一個名稱為 address 的物件;在personaddresscountry,建立一個值為 "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"]);

參考

0 意見:

張貼留言