JavaScript Weird Part (23) - 物件與實體

建立物件的捷徑

在 JavaScript 裡面，完成一件事情還有許多方式，還記得宣告 new object 並非建立物件的最好方式，有一種建立物件的捷徑是利用大括號 {} 的物件實體語法（object literal syntax)，得到的結果會和 new object 一樣。

var person = {};
console.log(person);

如果我列印出 person，會看到一個空物件，就像 new object 一樣，這是比較快的作法。但注意這不是運算子，這是當 JavaScript 在解析語法時，看到大括號，但這個大括號不是用在 if 條件式或者迴圈時，它就會假設你在創造一個物件。

我們還可以初始化物件，可以同時在這個大括號裡面建立屬性和方法。

//命名屬性與方法，並賦值。以逗號增加另一個名稱/值的配對
var person={
firstname:'Tony',
lastname:'Alicea'
};
console.log(person);

物件有 2 個屬性

這跟建立 var person = new Object() 再依序一個一個增加屬性 person.firstname = 'Tony'; 、person.lastname='Alicea'; 一樣

物件裡還可以包含另一個物件

//命名屬性與方法，並賦值。以逗號增加另一個名稱/值的配對
var person={
firstname:'Tony',
lastname:'Alicea',
address:{
street:'123 Main St.',
City:'NY'
}
}

所以當 JavaScript 的語法解析器，執行程式碼的時候，遇到大括號的區塊，它會當成同一行程式碼，並且知道你要建立物件。所以我可以在任何地方新增物件、定義屬性和方法。這比一次定義一個屬性還分成很多行，要快上許多。

建立函數的捷徑

當我們了解這個捷徑的處理方式後，就可以快速的建立物件和變數。因此我們也可以快速建立函數。

有一個打招呼的函數，包含物件，函數需要知道 firstname 屬性，才能打招呼。呼叫 greet 並傳入 Tony。 物件再記憶體裡，被傳入函數中，而且可以使用

function greet(person){
console.log('Hi'+person.firstname);
};

greet(person);

同時建立函數與物件

var person={
firstname:'Tony',
lastname:'Alicea',
address:{
street:'123 Main St.',
City:'NY'
}
}

function greet(person){
console.log('Hi'+person.firstname);
};

greet(person);



greet({
firstname:'Mary',
lastname:'Doll'
});

用逗號區隔名稱/值配對，然後名稱和值用冒號區隔，再用大括號包起來。JavaScript 可以用物件實體語法，在看到函數的時候，檢查你需要傳入什麼，當它看到大括號的時候，知道你在建立物件，所以建立完就傳入這個物件。這和傳入數值和字串沒有差別。在這個情況下，我同時建立物件，我也可以把它當作一般變數使用。

在這個情況下，我傳入 person 這個變數，並包含 firstname 屬性，然後再次呼叫函數，裡面包含另一個物件。這個物件在呼叫時同時被建立，然後 firstname 是 Mary。

混合語法

用person 這個變數，然後新增一個屬性。用 . 點運算子，而不是物件實體語法，然後再用物件實體語法定義物件。這樣就能結合 2 種語法了。

person.address={
street:'123 Second St.'
}

為什麼可以這樣做？因為程式碼並不是真的直接被處理，它會先被 JavaScript 轉化成電腦能懂的東西。所以不論物件實體語法或用點運算子建立物件，都是一樣的，對 JavaScript 底層來說，它就是在建立物件、屬性和方法到記憶體裡面。