小雕雕的家

這篇要來出考題考考大家！！ 答對了沒有獎品

前言：

這篇要來拿昨天看到的一個例子來練習，覺得是個很好的範例，內含許多 javascript 基礎

在這個系列的第一篇有說明了 By Value、By Reference 的差異還有造成差異的原因

在進行考試之前可以進來這篇複習：

Javascript 基礎打底系列 (一) - 常見的出包狀況解析 (關於By Value、By Reference)

如果你看過且已經完全了解上面那篇的話，那下面這問題就會答對

我也有把我的邏輯貼到 javascript.tw 社團去給各位高手驗證一下，證明觀念算是對的

起因是我看到這一篇：寫了10年的Javascript也未必全了解的連續賦值運算

這個文章對於這題的解釋讓我覺得怪怪的，且說明得很亂

所以才用自己對 javascript 語言的了解來重新解釋

練習開始

上面的 a.x 、b.x 輸出各為多少？

這題的答案是：

a.x 為 undefined 

b.x 為 { n : 2 }

(解說請往下捲)

.

.

.

.

.

.

分步驟解答：

1. var a = { n: 1 }; 這行主要在做如下的動作：

宣告一個變數 a，在記憶體位址中的值是 { n : 1 }

此時記憶體中的狀況：( 抱歉不太會畫圖 )

2. var b = a; 這行在做如下的動作：

宣告一個變數 b，因為是複合值 (物件) 所以參考到 a 的位址 

因為 b 參考到 a 的位址，所以 a 值改變 b 也會同時改變，因為是同一個記憶體位址

此時記憶體中的狀況：

3. 然後經過  a.x = a = { n : 2 };  這段稍微複雜的這行，他進行了以下動作

a. 首先做左邊 a.x，於是 a、b 指到的值都新增了一個 x 屬性，並會將右方的結果寫到這個屬性中

b. 右方的結果 a  = { n : 2 } 被重新賦予了 { n : 2 } 這個物件，因此重新指向另一個記憶體位址

c. 將右方運算結果的 a 指向的值 { n : 2 } 給予 a.x，但此時的 a.x 指向的是之前 a、b共用的位址

但此位址目前只有 b 在使用，所以變數 b 指向的記憶體位址值改變為 { n : 1, x : { n : 2 } }

最後記憶體中的狀況如下圖：

4. 最後輸出 a.x 與 b.x，因為 a 沒有 x 屬性，所以是 undefined

而 b.x 的值如上圖為 { n : 2 }

最後用 console 來驗證一下 a、b 兩變數的值是不是如我們所預期的

最後附上社團前輩畫圖提供解說，感謝前輩們讓我的觀念更牢固啊!!!

最後........

答錯了也沒關係，再回去看看這篇吧

Javascript 基礎打底系列 (一) - 常見的出包狀況解析 (關於By Value、By Reference)

Javascript 基礎打底系列

Javascript 基礎打底系列 (一) - 常見的出包狀況解析 (關於By Value、By Reference)

Javascript 基礎打底系列 (二) - null、undefined、NaN 的差異與檢查方式

Javascript 基礎打底系列 - By Value、By Reference 的課後考題！

Javascript 基礎打底系列 (三) - 邏輯運算子，與短路邏輯 (short circuit logic) 的應用