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 的物件；在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"]);
→回到此系列文章目錄

參考

0 意見:

張貼留言