先看個(gè)例子：

 <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>

上面的例子看似簡(jiǎn)單，但結(jié)果并不好了解，很容易把人們給想繞了——“a.x不是指向?qū)ο骯了么？為啥log(a.x)是undefined?”、“b.x不是應(yīng)該跟a.x是一樣的么？為啥log出來(lái)居然有2個(gè)對(duì)象”

當(dāng)然各位可以先自行理解一下，若能看出其中的原因和工作機(jī)理自然就無(wú)須繼續(xù)往下看啦。

下面來(lái)分析下這段簡(jiǎn)單代碼的工作步驟，從而進(jìn)一步理解js引用類(lèi)型“賦值”的工作方式。

首先是

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

在這里a指向了一個(gè)對(duì)象{n:1}（我們姑且稱它為對(duì)象A），b指向了a所指向的對(duì)象，也就是說(shuō)，在這時(shí)候a和b都是指向?qū)ο驛的：

這一步很好理解，接著繼續(xù)看下一行非常重要的代碼：

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

我們知道js的賦值運(yùn)算順序永遠(yuǎn)都是從右往左的，不過(guò)由于“.”是優(yōu)先級(jí)最高的運(yùn)算符，所以這行代碼先“計(jì)算”了a.x。

這時(shí)候發(fā)生了這個(gè)事情——a指向的對(duì)象{n:1}新增了屬性x（雖然這個(gè)x是undefined的）：

從圖上可以看到，由于b跟a一樣是指向?qū)ο驛的，要表示A的x屬性除了用a.x，自然也可以使用b.x來(lái)表示了。

接著，依循“從右往左”的賦值運(yùn)算順序先執(zhí)行 a={n:2} ，這時(shí)候，a指向的對(duì)象發(fā)生了改變，變成了新對(duì)象{n:2}（我們稱為對(duì)象B）：

接著繼續(xù)執(zhí)行 a.x=a，很多人會(huì)認(rèn)為這里是“對(duì)象B也新增了一個(gè)屬性x，并指向?qū)ο驜自己”

但實(shí)際上并非如此，由于一開(kāi)始js已經(jīng)先計(jì)算了a.x，便已經(jīng)解析了這個(gè)a.x是對(duì)象A的x，所以在同一條公式的情況下再回來(lái)給a.x賦值，也不會(huì)說(shuō)重新解析這個(gè)a.x為對(duì)象B的x。

所以 a.x=a 應(yīng)理解為對(duì)象A的屬性x指向了對(duì)象B:

那么這時(shí)候結(jié)果就顯而易見(jiàn)了。當(dāng)console.log(a.x)的時(shí)候，a是指向?qū)ο驜的，但對(duì)象B沒(méi)有屬性x。沒(méi)關(guān)系，當(dāng)查找一個(gè)對(duì)象的屬性時(shí)，JavaScript 會(huì)向上遍歷原型鏈，直到找到給定名稱的屬性為止。但當(dāng)查找到達(dá)原型鏈的頂部 - 也就是 Object.prototype - 仍然沒(méi)有找到指定的屬性B.prototype.x，自然也就輸出undefined；

而在console.log(b.x)的時(shí)候，由于b.x表示對(duì)象A的x屬性，該屬性是指向?qū)ο驜，自然也輸出了[object Object]了，注意這里的[object Object]可不是2個(gè)對(duì)象的意思，對(duì)象的字符串形式，是隱式調(diào)用了Object對(duì)象的toString()方法，形式是："[object Object]"。所以[object Object]表示的就只是一個(gè)對(duì)象罷了

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

最新評(píng)論