前言

文章標(biāo)題這句話原本是在國(guó)外某JavaScript規(guī)范里看到的，當(dāng)時(shí)并沒有引起足夠的重視，直到最近一次出現(xiàn)了bug發(fā)現(xiàn)JS里的連等賦值操作的特色(坑)。

網(wǎng)上搜索一番發(fā)現(xiàn)一個(gè)非常好的連等賦值的（來源1，來源2）例子：

var a = {n:1};
a.x = a = {n:2};
console.log(a.x); // 輸出?

答案是：

console.log(a.x); // undefined

不知道各位有沒有答對(duì)，至少我是答錯(cuò)了。

遂借此機(jī)會(huì)好好看看JS連等賦值是怎么回事

賦值順序？

假設(shè)有一句代碼： A=B=C; ，賦值語句的執(zhí)行順序是從右至左，所以問題在于：

是猜想1： B = C; A = C; ？

還是猜想2： B = C; A = B;  ？

我們都知道若兩個(gè)對(duì)象同時(shí)指向一個(gè)對(duì)象，那么對(duì)這個(gè)對(duì)象的修改是同步的，如：

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

所以可以根據(jù)這個(gè)特性來測(cè)試連續(xù)賦值的順序。

按照猜想1，把C換成具體的對(duì)象，可以看到對(duì)a的修改不會(huì)同步到b上，因?yàn)樵趫?zhí)行第一行和第二行時(shí)分別創(chuàng)建了兩個(gè) {n:1} 對(duì)象。如：

var b={n:1};
var a={n:1};
a.n=0;
console.log(b);//Object {n: 1}

再按照猜想2，把C換成具體的對(duì)象，可以看到對(duì)a的修改同步到了b，因?yàn)閍和b同時(shí)引用了一個(gè)對(duì)象，如：

var b={n:1};
var a=b;
a.n=0;
console.log(b);//Object {n: 0}

測(cè)試真正的連等賦值：

var a,b;
a=b={n:1};
a.n=0;
console.log(b);//Object {n: 0}

可以看到是符合猜想2的，如果有人覺得這個(gè)測(cè)試不準(zhǔn)確可以再來測(cè)試，使用ECMA5的setter和getter特性來測(cè)試。

首先setter和getter是應(yīng)用于變量名的，而不是變量真正儲(chǔ)存的對(duì)象，如下：

Object.defineProperty(window,"obj",{
 get:function(){
  console.log("getter!!!");
 }
});
var x=obj;
obj;//getter!!! undefined
x;//undefined

可以看到只有obj輸出了“getter!!!”，而x沒有輸出，用此特性來測(cè)試。

連等賦值測(cè)試2：

Object.defineProperty(window,"obj",{
 get:function(){
  console.log("getter!!!");
 }
});
a=b=obj;//getter!!! undefined

通過getter再次證實(shí)，在A=B=C中，C只被讀取了一次。

所以，連等賦值真正的運(yùn)算規(guī)則是  B = C; A = B;  即連續(xù)賦值是從右至左永遠(yuǎn)只取等號(hào)右邊的表達(dá)式結(jié)果賦值到等號(hào)左側(cè)。

連續(xù)賦值能拆開寫么？

通過上面可以看到連續(xù)賦值的真正規(guī)則，那么再回歸到文章開頭的那個(gè)案例，如果按照上述規(guī)則將連續(xù)賦值拆開會(huì)發(fā)現(xiàn)結(jié)果不一樣了，如：

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

所以連續(xù)賦值語句雖然是遵從從右至左依次賦值的規(guī)則但依然不能將語句拆開來寫，至于為什么

我猜測(cè)：js內(nèi)部為了保證賦值語句的正確，會(huì)在一條賦值語句執(zhí)行前，先把所有要賦值的引用地址取出一個(gè)副本，再依次賦值。

所以我認(rèn)為這段代碼 a.x=a={n:2}; 的邏輯是：

1、在執(zhí)行前，會(huì)先將a和a.x中的a的引用地址都取出來，此值他們都指向{n:1}

2、在內(nèi)存中創(chuàng)建一個(gè)新對(duì)象{n:2}

3、執(zhí)行a={n:2}，將a的引用從指向{n:1}改為指向新的{n:2}

4、執(zhí)行a.x=a，此時(shí)a已經(jīng)指向了新對(duì)象，而a.x因?yàn)樵趫?zhí)行前保留了原引用，所以a.x的a依然指向原先的{n:1}對(duì)象，所以給原對(duì)象新增一個(gè)屬性x，內(nèi)容為{n:2}也就是現(xiàn)在a

5、語句執(zhí)行結(jié)束，原對(duì)象由{n:1}變成{n:1,x:{n:2}}，而原對(duì)象因?yàn)闊o人再引用他，所以被GC回收，當(dāng)前a指向新對(duì)象{n:2}

6、所以就有了文章開頭的運(yùn)行結(jié)果，再執(zhí)行a.x，自然就是undefined了

上述過程按序號(hào)圖示：

按照上述過程可以看出舊的a.x和新的a都指向新創(chuàng)建的對(duì)象{n:2}，所以他們應(yīng)該是全等的。

測(cè)試：

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

因?yàn)槲覀冊(cè)黾恿藇ar b=a，即將原對(duì)象增加了一條引用，所以在上述第5步時(shí)不會(huì)被釋放，證實(shí)了上面的結(jié)論。

后記

通過這次了解了連續(xù)賦值的特點(diǎn)，再回過頭看文章標(biāo)題，似乎應(yīng)該叫：

盡量不要使用JS的連續(xù)賦值操作，除非真的了解它的內(nèi)部機(jī)制及可能會(huì)產(chǎn)生的后果。

最新評(píng)論