一道JS 連續賦值運算的問題

原文連接：https://www.cnblogs.com/joesbell/p/6229423.html

<script>
var a = {n:1}; 
var b = a;  
a.x = a = {n:2}; 
console.log(a.x);// --> undefined 
console.log(b.x);// --> [object Object] 
</script>

上面的例子看似簡單，但結果並很差瞭解，很容易把人們給想繞了——「a.x不是指向對象a了麼？爲啥log(a.x)是undefined?」、「b.x不是應該跟a.x是同樣的麼？爲啥log出來竟然有2個對象」

固然各位能夠先自行理解一下，若能看出其中的緣由和工做機理天然就無須繼續往下看啦。

下面來分析下這段簡單代碼的工做步驟，從而進一步理解js引用類型「賦值」的工做方式。

首先是

var a = {n:1};  
var b = a;

在這裏a指向了一個對象{n:1}（咱們姑且稱它爲對象A），b指向了a所指向的對象，也就是說，在這時候a和b都是指向對象A的：

 

這一步很好理解，接着繼續看下一行很是重要的代碼：

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

咱們知道js的賦值運算順序永遠都是從右往左的，不過因爲「.」是優先級最高的運算符，因此這行代碼先「計算」了a.x。

這時候發生了這個事情——a指向的對象{n:1}新增了屬性x（雖然這個x是undefined的）：

從圖上能夠看到，因爲b跟a同樣是指向對象A的，要表示A的x屬性除了用a.x，天然也可使用b.x來表示了。

接着，依循「從右往左」的賦值運算順序先執行 a={n:2} ，這時候，a指向的對象發生了改變，變成了新對象{n:2}（咱們稱爲對象B）：

 

接着繼續執行 a.x=a，不少人會認爲這裏是「對象B也新增了一個屬性x，並指向對象B本身」

但實際上並不是如此，因爲（ .  運算符最早計算）一開始js已經先計算了a.x，便已經解析了這個a.x是對象A的x，因此在同一條公式的狀況下再回來給a.x賦值，也不會說從新解析這個a.x爲對象B的x。

因此 a.x=a 應理解爲對象A的屬性x指向了對象B:

 

 

那麼這時候結果就顯而易見了。當console.log(a.x)的時候，a是指向對象B的，但對象B沒有屬性x。不要緊，當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性爲止。但當查找到達原型鏈的頂部 - 也就是 Object.prototype - 仍然沒有找到指定的屬性B.prototype.x，天然也就輸出undefined；

而在console.log(b.x)的時候，因爲b.x表示對象A的x屬性，該屬性是指向對象B，天然也輸出了[object Object]了，注意這裏的[object Object]可不是2個對象的意思，對象的字符串形式，是隱式調用了Object對象的toString()方法，形式是："[object Object]"。因此[object Object]表示的就只是一個對象罷了:)