[JavaScriptWeird]No.22 物件與物件實體

發表於 | 更新於 | 分類於

前言

上一篇我們介紹了如何使用「.」運算子取出物件屬性的值，記得一開始的那行程式碼嗎?課程上提到有「更好的方式」建立物件，本篇就是要來介紹那個「更好的方式」。

物件實體語法 (Object Literals)

上一篇有一句程式碼是這樣的，這是宣告 new object 來建立物件，但這不是最好的方式。

1
var person = new Object();

在 JavaScript 中，對於相同的一件事情可以有多種不同的做法來達成，像是我們想要建立一個物件，可以使用 new object 來建立，但針對建立物件這件事情而言，這個作法不是最好的，之後課程會提到 new object 真正的意涵。

建立物件有個捷徑，它叫做物件實體語法，以大括號決定範圍，這就像我們使用 new object 來建立物件一樣。

特別注意的是 {} 並不是運算子，這是當 JavaScript 在解析語法時，看到大括號而不是作為 if 條件式或迴圈時，就會認定是要創造一個物件。

1
2
3
4
var person = {};  
var person2 = new Object();  
console.log(person); // {}  
console.log(person2); // {}

還記得我們在上一篇要新增物件屬性時，必須這樣子寫：

1
// person.firstName = 'Tony';

但如果使用物件實體語法，我們可以在大括號裡同時建立屬性與方法：

1
var person = { firstName: 'Tony', lastName: 'Alicea' };

整理一下排版，會得到這樣的結果

1
2
3
4
5
var person = {  
  firstName: 'Tony',  
  lastName: 'Alicea'  
};  
console.log(person);

是不是覺得似曾相識呢～沒錯，這個方式就如同使用 new object 來建立物件，會得到一樣的結果，但是透過物件實體語法建立的物件會比較清楚易懂。

1
2
3
4
5
6
7
var person = {  
  firstName: 'Tony',  
  lastName: 'Alicea',  
  address: {  
    street: '111 Main St.'  
  }  
};

當我們了解物件實體語法是什麼東西後，便可以相當迅速地建立物件，也可以從中衍生出一些用法。

舉個例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
var Tony = {  
  firstName: 'Tony',  
  lastName: 'Alicea',  
  address: {  
    street: '111 Main St.'  
  }  
};

function sayHi(person){  
  console.log('Hi ' + person.firstName);  
}

sayHi(Tony);　// Hi Tony

這個結果如我們預料，我們呼叫 sayHi 函式並將物件當成參數傳入，最後印出結果，但是我們可以同時呼叫函式和建立物件

1
sayHi({ firstName: 'Mary', lastName: 'Alicea' });

或者也可以做換行整理

1
2
3
4
sayHi({   
  firstName: 'Mary',  
  lastName: 'Alicea'   
});

JavaScript 可以使用物件實體語法在任何地方建立物件，也可以把這個當作一般變數使用。

物件實體語法也可以和「.」運算子混合使用

接續上面的範例，我們可以這樣做

1
2
3
4
Tony.address2 = {  
  street: '333 Second St.'  
}  
console.log(Tony);

為什麼可以這麼做?

因為我們寫的程式碼並不會真的直接被輸出，而是會透過 JavaScript 變成電腦能懂的東西，不論物件實體語法或是使用「.」運算子建立物件都是一樣的，對於 JavaScript 底層來說，這件事情就是「建立物件、物件屬性和方法到記憶體中並且建立參考」，所以我們用的語法對它們而言沒差，因為都是做同樣的事情，重要的是我們要用什麼語法。

這就是物件實體語法，用大括號定義範圍、用冒號區隔屬性名稱和值。

0%