從一個簡單例子來理解js參考型別指標的工作方式

標籤：style   blog   class   code   java   javascript   

?

1 2 3 4 5 6 7

<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參考型別“賦值”的工作方式。

首先看下a.x=a={n:2}這段代碼，實際等價於：

a.x=a;

a={n:2}

雖然js中運算賦值順序應是從左往右，但鑒於運算子“.”的層級是最高的，故先執行了最左邊的“a.x=a”，再執行“a={n:2}”。

這一步說明了，我們就從頭到尾一步步看下js是怎麼執行這段代碼的。

首先是

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

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

這一步很好理解，接著繼續看下一行代碼：

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

也就是上面我們說過的可以拆成兩行看的代碼：

a.x = a ;    //當然這樣的寫法是不提倡的，循環參考，會引起記憶體流失

a = {n:2};

這個時候發生了這樣的事情——通過a.x給對象A增加了一個屬性x，同時這個屬性x是指向對象A自己的；接著由於“a={n:1}”，所以a不再指向原對象A，而是指向新對象{n:2}（我們稱為對象B）：

這裡有個好玩的事情，由於對象A增加了一個屬性x，鑒於b是指向對象A的，所以我們也可以通過b.x來表示A對象的這個新屬性。

 

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

而在console.log(b.x)的時候，由於b.x表示對象A的x屬性，該屬性是指向對象A本身。A對象有2個屬性n和x，自然也輸出了2個Object了。

 

以上純粹為個人對js參考型別工作方式的理解，若有不對的地方請指出謝謝 :)