[JS奇怪的世界]No.23 物件與物件實體

發表於 | 更新於 | 分類於

前言

這章節準備來講解另一種建立物件的方式，還記得上一個章節我們是使用 new Object(); 來建立物件的吧?其實這個方式對於開發者來講非常不直覺 ↓

1
var person = new Object();

所以這章節將要講解另一種建立物件的方式，那就是物件實體語法，使用的方法非常簡單，使用花括號即可 ↓

1
2
3
4
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
};

但是要注意花括號並不是一個運算子，當語法解析器發現你不是使用 if 或 for 的時候，它認為你是在建立一個物件，而這個做法又稱物件實體語法，在開發者對於開發者來講是比較直覺且淺顯易懂的，讓我們回頭比較一下上一章節的寫法 ↓

1
2
3
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';

當然這兩種都是在建立物件，但是物件實體語法比較容易打且方便辨識。

那物件中塞入物件呢? ↓

1
2
3
4
5
6
7
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
  address: {
   street: '111 Main',
 },
};

而上一章節呢? ↓

1
2
3
4
5
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
person.address = new Object();
person.address.street = '111 Main';

這兩者比較之後可以發現物件實體寫法是真的比較容易撰寫及分析的。

課程也舉了一個範例，可以透過這種方式呼叫物件 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
  address: {
   street: '111 Main',
 },
};

function green(name){
 console.log('Hi ' + name.fistname)
};

green(person);

然後也可以用這樣做 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
  address: {
   street: '111 Main',
 },
};

function green(name){
 console.log('Hi ' + name.fistname)
};

green(person);

green({
 fistname: 'Mary',
 lastname: 'Doe',
});

JavaScript 也接受你使用這種方式建立物件。

1
2
3
4
green({
 fistname: 'Mary',
 lastname: 'Doe',
});

物件實體語法;

圖源

JavaScript 全攻略:克服 JS 奇怪的部分

0%