# 物件

## 一、物件的定義方式
物件的定義方式分為兩種，物件實字與物件建構式
<pre>
var obj = {} // 物件實字 Object Literals
var obj = new Obj{} // 物件建構式
</pre>

<br>

## 二、變數與物件屬性的差異
用宣告方式定義的變數，會直接賦值給 window。
而在全域環境下直接新增，則是以屬性的方式新增在 window 底下，並不是變數。
<pre>
var a = 1 // 宣告定義變數等於 window.a
b = 2 // 以屬性方式賦予等於 window.b
</pre>

而兩者不同在於：<font color="red">**屬性可以被刪除，但變數不行**</font>
因此使用 delete 來查看兩者差別，刪除過後 a 依然存在，而 b 會變成 not defined

delete a // false 不能被刪除
delete b // true  可以被刪除
console.log(a, b)
// 1
// b is not defined

<br>

## 三、未定義的物件屬性預設值
:::info
在 JavaScript 物件下，如果查找一個未定義的物件屬性，會回傳 **undefined** 的結果，而在 undefined 上也不能新增任何屬性
:::

var obj = {
    a: 1
}
console.log(obj.b) // undefined
obj.b.c = 2        // Cannot set property 'c' of undefined

要解決這個問題有兩種方法：
1. 事先定義好物件結構
2. 若無法事先定義結構，則可以使用定義物件的方式來新增屬性

obj.b = {
    c: 2
}
console.log(obj.b.c) // 2

<br>

## 四、Call by Reference 和 Call by Sharing
### 傳值呼叫 Call by Value
一般在傳值的時候，會直接把值賦予給變數，而每個變數的記憶體都是各自獨立的。
因此以下範例來說，雖然把 a 賦值給 b，但因為記憶體各自獨立，所以就算把 b 重新賦值，也不會影響 a 變數的結果。

var a = 1
var b = a
b = 2
console.log(a, b) // 1, 2

### 傳參照呼叫 Call by Reference
傳參照又可稱為 **傳參考**，相較於傳值是直接賦值，傳參照是傳 **「記憶體的位址」**，也就是 **「傳址」**。
在維基百科的 [求值策略](https://zh.wikipedia.org/wiki/%E6%B1%82%E5%80%BC%E7%AD%96%E7%95%A5#%E4%BC%A0%E5%BC%95%E7%94%A8%E8%B0%83%E7%94%A8) 裡說明：
> 傳遞給函式的是它的實際參數的隱式參照而不是實參的拷貝。
> 通常函式能夠修改這些參數（比如賦值），而且改變對於呼叫者是可見的。

在其他程式語言能夠使用傳參照的方式傳遞資料，而在 JavaScript 只有物件（包含函式、陣列）有類似的概念。
簡單來說，傳參考傳的是記憶體位置，因此如果把 a 物件賦予給 b 變數，接著再改變 b 變數的物件屬性，那麼 a 物件因為使用同樣的記憶體，所以也會跟著改變結果。

var a = { x: 1 }
var b = a
b.x = 2
console.log(a === b) // true

詳細說明可參考 [物件傳參考](/DvB-WdoORpSBG5qxQkYxBQ)

### 傳共享物件呼叫 Call by Sharing
Call by Sharing 在維基百科裡面說明：
> 對於呼叫者而言在被呼叫函數裡修改參數是沒有影響的。
> 如果要達成傳參照呼叫的效果就需要傳一個共享物件，一旦被呼叫者修改了物件，呼叫者就可以看到變化（因為物件是共享的，沒有拷貝）。

先看以下範例，這是一個傳參考的概念，把 ming 物件帶進函式後，在函式內更改了 name 屬性，也會影響到全域底下的 ming 物件。
簡單來說，Call by Sharing 就是把物件共享傳入函式內，並可以在函式內修改共享物件屬性的概念。

function changeName(person) {
    person.name = '大明'
    return person
}
var ming = {
    name: '小明'
}
changeName(ming)
console.log(ming.name) // 大明

但是如果在函式裡面對 ming 修改物件屬性，此時因為重新指向的關係，物件的關聯性就會消失，在函式內的物件會產生新的記憶體空間成為獨立的物件，並且不會修改全域底下 ming 物件的內容。

function changeName(person) {
    person = {
        name: '阿明'
    }
    return person
}
var ming = {
    name: '小明'
}
changeName(ming)
console.log(ming.name) // 小明

<br>

## 五、陣列
JavaScript 分為 **原始型別** 和 **物件型別**，陣列是屬於物件型別的其中一種，但是和物件的使用方式還是有些不同。
陣列的定義方式是使用 **陣列實字**

var array = []

陣列可以在裡面插入任何型別，如果要插入新的值，可以使用 `push()` 方法來新增值。

* **陣列增加屬性**
這邊要特別注意，物件可以隨意增加屬性，但是如果 **直接對陣列增加屬性**，新增的屬性 **不屬於陣列裡面的值**，也就 **不會改變陣列長度**。

var array = [1, '2', { a: 3 }]
array.b = 4
console.log(array)

// 0: 1
// 1: "2"
// 2: {a: 3}
// b: 4        // 新增的 b 不屬於陣列的值，也沒有索引值
// length: 3   // 新增 b 後也不不會改變陣列長度

* **跳序新增資料**
而如果陣列跳序新增資料，則會自動補上 **empty** 空的陣列內容，實際上在取值也會是 **undefined** 的狀態

var array = [1, 2, 3]
array[4] = 5
array[5] = 6
console.log(array)    // [1, 2, 3, empty, 5, 6]
console.log(array[3]) // undefined

---

## 參考資料
* [JavaScript 核心篇](https://www.hexschool.com/courses/js-core.html)