PJCHENder 未整理筆記

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

2018-07-25

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

@([Udemy] JavaScript: Understanding the Weird Parts)[javaScript, udemy]

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 的時候也比較容易。

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 建立物件
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"]);

→回到此系列文章目錄

參考

掃描二維條碼,分享此文章