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

前言:

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

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

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

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

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

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

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

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

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

 

練習開始

var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };
 
console.log(a.x);
console.log(b.x);

 

上面的 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) 的應用

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()