寫了10年Javascript未必全瞭解的連續賦值運算 –> 說明了JS中變數是引用

寫了10年Javascript未必全瞭解的連續賦值運算

摘自： http://www.iteye.com/topic/785445

很喜歡蔡蔡 的這個標題，實際蔡蔡已經分析過了，這裡借用了。或許有點標題黨的意思。看完就知了。

 

一、引子Js代碼  

1. var a = {n:1};  
2. a.x = a = {n:2};  
3. alert(a.x); // --> undefined  

 

這是蔡蔡在看jQuery源碼 時發現這種寫法的。以上第二句 a.x = a = {n:2} 是一個連續賦值運算式。這個連續賦值運算式在引擎內部究竟發生了什嗎？是如何解釋的？

 

二、猜想

猜想1：從左至右賦值，a.x 先賦值為{n:2}，但隨後 a 賦值為 {n:2}，即  a 被重寫了，值為 {n:2}，新的 a 沒有 x屬性，因此為undefined。步驟如下

 

1, a.x = {n:2};
2, a = {n:2};

 

這種解釋得出的結果與實際運行結果一致，貌似是對的。注意猜想1中 a.x 被賦值過。

 

猜想2：從右至左賦值，a 先賦值為{n:2}，a.x 發現 a 被重寫後(之前a是{a:1})，a.x = {n:2} 引擎節流a.x賦值，忽略了。步驟如下：

 

1, a = {n:2};
2, a.x 未被賦值{n:2}

 

等價於 a.x = (a = {n:2})，即執行了第一步，這樣也能解釋a.x為undefined了。注意猜想2中a.x壓根沒被賦值過。

 

三、證明

上面兩種猜想相信多數人都有，群裡討論獃獃認為是猜想1， 我認為是猜想2。其實都錯了。我忽略了引用的關係。如下，加一個變數b，指向a。

Js代碼  

1. var a = {n:1};  
2. var b = a; // 持有a，以回查  
3. a.x = a = {n:2};  
4. alert(a.x);// --> undefined  
5. alert(b.x);// --> [object Object]  

 

發現a.x仍然是undefined，神奇的是 b.x 並未被賦值過(比如：b.x={n:2})，卻變成了[object Object]。b 是指向 a({n:1})的，只有a.x = {n:2}執行了才說明b是有x屬性的。實際執行過程：從右至左，a 先被賦值為{n:2}，隨後a.x被賦值{n:2}。

 

1, a = {n:2};
2, a.x = {n:2};

等價於

a.x = (a = {n:2});

 

與猜想2的區別在於a.x 被賦值了，猜想2中並未賦值。最重要的區別，第一步 a = {n:2} 的 a 指向的是新的對象{n:2} ， 第二步 a.x = {n:2} 中的 a 是 {a:1}。即在這個連等語句

Js代碼  

1. a.x = a = {n:2};  

 

a.x 中的a指向的是 {n:1}，a 指向的是 {n:2}。如

 

 

四：解惑

這篇寫完，或許部分人看完還是暈暈的。因為裡面的文字描述實在是繞口。最初我在理解這個連等指派陳述式時

Js代碼  

1. var a = {n:1};  
2. a.x = a = {n:2};  

 

認為引擎會限制a.x的重寫（a被重寫後），實際卻不是這樣的。指向的對象已經不同了。引擎也沒有限制a.x={n:2}的重寫。
謝謝所有參與討論的人：蔡蔡、豬大腸 、獃獃、雅儒。這個問題最早是蔡蔡提出的。雅儒在 菜鳥灰呀灰 群裡每次的討論都那麼投入，認真，哪怕是別人提出的話題。

 

五：結束

呵，以另一個連續賦值題結束。fun執行後，這裡的 變數 b 溢出到fun外成為了全域變數。想到了嗎？

Js代碼  

1. function fun(){  
2.     var a = b = 5;  
3. }  
4. fun();  
5. alert(typeof a); // --> undefined  
6. alert(typeof b); // --> number