談談JavaScript中建立物件(Object)

米淇淋發表於2019-05-08
JavaScript物件Object

在這篇文章中我將會著重說明如何建立和呼叫JavaScript裡的物件（Object）。

物件（Object）是什麼？

在開始介紹如何建立物件前，我們要知道物件是什麼。物件（Object）簡單地來說，就是一堆「名稱- 值」的配對（key - value pairs）。至於可以放入哪些值呢？

第一種是原生的值（primitive），像是布林值（Boolean）、數值（Number）或是字串（String），而在物件當中，我們把這類的值稱為屬性（Property）。

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

第三种放入的值可以是函式（function），在物件的情況下，我們會把這種函式稱做方法（method）。在物件中的每一個Property或是Method都會佔據電腦當中一個記憶體的位置，在需要使用到的時候，把它們調取出來。

接下來我將介紹三種建立JavaScript裡的物件及如何呼叫的方法：

方法一：使用 [ ]

建立物件

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

談談JavaScript中建立物件(Object)

讓我們看一下底下的例子：

// 建立物件
var person = new Object();
person["firstname"] = "Jay";
person["lastname"] = "Chou";
複製程式碼

這是利用[ ]建立物件的方法，首先我們建立一個物件，叫做person，接著開始給它「名稱-值」配對，例如，firstname是屬性的名稱，Jay則是它的值；lastname也是屬性名稱，Chou則是它的值。通過這種方法，我們就可以建立物件裡面的各種「名稱-值」配對。

呼叫物件

緊接上面的例子，我們也同樣可以利用[ ]來呼叫已經建立好的物件，[ ]裡面如果放的是字串而不是變數，注意要記得加上引號'像是這樣：

// 呼叫物件
console.log(person["firstname"]);  // Jay
複製程式碼

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

// 呼叫物件
var id = "lastname";
console.log(person[id]);  // Chou
複製程式碼

方法二：使用點符號 .

建立物件

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

// 建立物件
person.address = new Object();
person.address.country = "China";
person.address.city = "Hangzhou";
person.address.location = "Xihu";
複製程式碼

呼叫物件

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

// 呼叫物件
console.log(person.address);  //{country: "China", city: "Hangzhou", location: "Xihu"}
console.log(person.address.country);  // China
console.log(person["address"]["location"]);  // Xihu
複製程式碼

從上面可以看出，. 和[ ]是可以交替使用的。

方法三：使用{ }

建立物件

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

// 建立物件
var person = {
    firstname: "Jay",
    lastname: "Chou",
    address: {
        country: "China",
        city: "Hangzhou",
        location: "Xihu"
    }
}
複製程式碼

通過這種方式，可以得到與方法二一模一樣的結果，呼叫方法也一致。

搭配函式使用物件

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

var jaychou = {
    firstname: "Jay",
    lastname: "Chou",
    address: {
        country: "China",
        city: "Hangzhou",
        location: "Xihu"
    }
}
複製程式碼

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

function SayHI(people) {
    console.log("HI" + people.lastname);
}

SayHI(jaychou);  // HI Chou
複製程式碼

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

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

SayHI({firstname: "Jony", lastname: "J"});  // HI J
複製程式碼

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

其他說明

其實使用new Object不是建立物件最好的方式，這點會在之後的文章再作說明。另外，雖然使用[ ]和.都可以拿來建立物件和呼叫物件，但還是建議儘量使用點符號.作為建立物件和呼叫物件的方法，這樣比較乾淨簡潔，在debug的時候也比較容易。

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

如果覺得文章對你有些許幫助，歡迎在我的GitHub部落格點贊和關注，感激不盡！

相關文章