寫(xiě)了10年的Javascript也未必全了解的連續(xù)賦值運(yùn)算
更新時(shí)間：2011年03月25日 16:26:44 作者：
很喜歡 蔡蔡 的這個(gè)標(biāo)題，實(shí)際蔡蔡已經(jīng)分析過(guò)了，這里借用了?；蛟S有點(diǎn)標(biāo)題黨的意思?？赐昃椭恕?/div>
一、引子
var a = {n:1};
a.x = a = {n:2};
alert(a.x); // --> undefined
這是蔡蔡在看 jQuery源碼 時(shí)發(fā)現(xiàn)這種寫(xiě)法的。以上第二句 a.x = a = {n:2} 是一個(gè)連續(xù)賦值表達(dá)式。這個(gè)連續(xù)賦值表達(dá)式在引擎內(nèi)部究竟發(fā)生了什么？是如何解釋的？
二、猜想
猜想1：從左到右賦值，a.x 先賦值為{n:2}，但隨后 a 賦值為 {n:2}，即 a 被重寫(xiě)了，值為 {n:2}，新的 a 沒(méi)有 x屬性，因此為undefined。步驟如下
1, a.x = {n:2};
2, a = {n:2};
這種解釋得出的結(jié)果與實(shí)際運(yùn)行結(jié)果一致，貌似是對(duì)的。注意猜想1中 a.x 被賦值過(guò)。
猜想2：從右到左賦值，a 先賦值為{n:2}，a.x 發(fā)現(xiàn) a 被重寫(xiě)后(之前a是{a:1})，a.x = {n:2} 引擎限制a.x賦值，忽略了。步驟如下：
1, a = {n:2};
2, a.x 未被賦值{n:2}
等價(jià)于 a.x = (a = {n:2})，即執(zhí)行了第一步，這樣也能解釋a.x為undefined了。注意猜想2中a.x壓根沒(méi)被賦值過(guò)。
三、證明
上面兩種猜想相信多數(shù)人都有，群里討論呆呆認(rèn)為是猜想1， 我認(rèn)為是猜想2。其實(shí)都錯(cuò)了。我忽略了引用的關(guān)系。如下，加一個(gè)變量b，指向a。
var a = {n:1};
var b = a; // 暫存a
a.x = a = {n:2};
alert(a.x);// --> undefined
alert(b.x);// --> [object Object]
發(fā)現(xiàn)a.x仍然是undefined，神奇的是 b.x 并未被賦值過(guò)(比如：b.x={n:2})，卻變成了[object Object]。b 是指向 a({n:1})的，只有a.x = {n:2}執(zhí)行了才說(shuō)明b是有x屬性的。實(shí)際執(zhí)行過(guò)程：從右到左，a 先被賦值為{n:2}，隨后a.x被賦值{n:2}。
1, a = {n:2};
2, a.x = {n:2};
等價(jià)于
a.x = (a = {n:2});
與猜想2的區(qū)別在于a.x 被賦值了，猜想2中并未賦值。最重要的區(qū)別，第一步 a = {n:2} 的 a 指向的是新的對(duì)象{n:2} ， 第二步 a.x = {n:2} 中的 a 是 {a:1}。即在這個(gè)連等語(yǔ)句
a.x = a = {n:2};
a.x 中的a指向的是 {n:1}，a 指向的是 {n:2}。如下圖
var a = {n:1};
a.x = a = {n:2};
認(rèn)為引擎會(huì)限制a.x的重寫(xiě)（a被重寫(xiě)后），實(shí)際卻不是這樣的。指向的對(duì)象已經(jīng)不同了。引擎也沒(méi)有限制a.x={n:2}的重寫(xiě)。
謝謝所有參與討論的人：蔡蔡、呆呆、儒儒。這個(gè)問(wèn)題最早是蔡蔡提出的。儒儒在 菜鳥(niǎo)灰呀灰 群里每次的討論都那么投入，認(rèn)真，哪怕是別人提出的話題。
五：結(jié)束
呵，以另一個(gè)連續(xù)賦值題結(jié)束。fun執(zhí)行后，這里的 變量 b 溢出到fun外成為了全局變量。想到了嗎？
function fun(){
var a = b = 5;
}
fun();
alert(typeof a); // --> undefined
alert(typeof b); // --> number
復(fù)制代碼 代碼如下:
var a = {n:1};
a.x = a = {n:2};
alert(a.x); // --> undefined
這是蔡蔡在看 jQuery源碼 時(shí)發(fā)現(xiàn)這種寫(xiě)法的。以上第二句 a.x = a = {n:2} 是一個(gè)連續(xù)賦值表達(dá)式。這個(gè)連續(xù)賦值表達(dá)式在引擎內(nèi)部究竟發(fā)生了什么？是如何解釋的？
二、猜想
猜想1：從左到右賦值，a.x 先賦值為{n:2}，但隨后 a 賦值為 {n:2}，即 a 被重寫(xiě)了，值為 {n:2}，新的 a 沒(méi)有 x屬性，因此為undefined。步驟如下
1, a.x = {n:2};
2, a = {n:2};
這種解釋得出的結(jié)果與實(shí)際運(yùn)行結(jié)果一致，貌似是對(duì)的。注意猜想1中 a.x 被賦值過(guò)。
猜想2：從右到左賦值，a 先賦值為{n:2}，a.x 發(fā)現(xiàn) a 被重寫(xiě)后(之前a是{a:1})，a.x = {n:2} 引擎限制a.x賦值，忽略了。步驟如下：
1, a = {n:2};
2, a.x 未被賦值{n:2}
等價(jià)于 a.x = (a = {n:2})，即執(zhí)行了第一步，這樣也能解釋a.x為undefined了。注意猜想2中a.x壓根沒(méi)被賦值過(guò)。
三、證明
上面兩種猜想相信多數(shù)人都有，群里討論呆呆認(rèn)為是猜想1， 我認(rèn)為是猜想2。其實(shí)都錯(cuò)了。我忽略了引用的關(guān)系。如下，加一個(gè)變量b，指向a。
復(fù)制代碼 代碼如下:
var a = {n:1};
var b = a; // 暫存a
a.x = a = {n:2};
alert(a.x);// --> undefined
alert(b.x);// --> [object Object]
發(fā)現(xiàn)a.x仍然是undefined，神奇的是 b.x 并未被賦值過(guò)(比如：b.x={n:2})，卻變成了[object Object]。b 是指向 a({n:1})的，只有a.x = {n:2}執(zhí)行了才說(shuō)明b是有x屬性的。實(shí)際執(zhí)行過(guò)程：從右到左，a 先被賦值為{n:2}，隨后a.x被賦值{n:2}。
1, a = {n:2};
2, a.x = {n:2};
等價(jià)于
a.x = (a = {n:2});
與猜想2的區(qū)別在于a.x 被賦值了，猜想2中并未賦值。最重要的區(qū)別，第一步 a = {n:2} 的 a 指向的是新的對(duì)象{n:2} ， 第二步 a.x = {n:2} 中的 a 是 {a:1}。即在這個(gè)連等語(yǔ)句
復(fù)制代碼 代碼如下:
a.x = a = {n:2};
a.x 中的a指向的是 {n:1}，a 指向的是 {n:2}。如下圖
四：解惑
這篇寫(xiě)完，或許部分人看完還是暈暈的。因?yàn)槔锩娴奈淖置枋鰧?shí)在是繞口。最初我在理解這個(gè)連等賦值語(yǔ)句時(shí)
復(fù)制代碼 代碼如下:
var a = {n:1};
a.x = a = {n:2};
認(rèn)為引擎會(huì)限制a.x的重寫(xiě)（a被重寫(xiě)后），實(shí)際卻不是這樣的。指向的對(duì)象已經(jīng)不同了。引擎也沒(méi)有限制a.x={n:2}的重寫(xiě)。
謝謝所有參與討論的人：蔡蔡、呆呆、儒儒。這個(gè)問(wèn)題最早是蔡蔡提出的。儒儒在 菜鳥(niǎo)灰呀灰 群里每次的討論都那么投入，認(rèn)真，哪怕是別人提出的話題。
五：結(jié)束
呵，以另一個(gè)連續(xù)賦值題結(jié)束。fun執(zhí)行后，這里的 變量 b 溢出到fun外成為了全局變量。想到了嗎？
復(fù)制代碼 代碼如下:
function fun(){
var a = b = 5;
}
fun();
alert(typeof a); // --> undefined
alert(typeof b); // --> number
相關(guān)文章
JavaScript實(shí)現(xiàn)仿windows文件名稱(chēng)排序
在JavaScript中,數(shù)組排序是一個(gè)常見(jiàn)的操作,本文將通過(guò)一個(gè)具體的代碼示例,解釋如何實(shí)現(xiàn)一個(gè)仿windows文件名稱(chēng)的排序算法,需要的可以參考下2024-12-12
最近這段時(shí)間因?yàn)槊刻煲薷木W(wǎng)站，為網(wǎng)站做特效，所以看了很多的js接觸事件，自己只會(huì)使用一小部分，有時(shí)用的時(shí)候也比較混亂，現(xiàn)在系統(tǒng)的整理了一下，特此分享到腳本之家平臺(tái)供大家參考下2016-04-04
Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法
很多時(shí)候我們需要用圖表來(lái)制作我們統(tǒng)計(jì)的數(shù)據(jù)直觀的分析,所以我們可以用Echarts來(lái)制作圖表,這篇文章主要給大家介紹了關(guān)于Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法,需要的朋友可以參考下2021-10-10
js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法
這篇文章主要介紹了js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法,涉及javascript操作彈出div層的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
獲取陰歷（農(nóng)歷）和當(dāng)前日期的js代碼
這篇文章主要為大家詳細(xì)介紹了獲取陰歷（農(nóng)歷）日期的js代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
動(dòng)態(tài)創(chuàng)建的表格單元格中的事件實(shí)現(xiàn)代碼
好久沒(méi)有搞網(wǎng)頁(yè)了，今天重新弄了一個(gè) ，做個(gè)動(dòng)態(tài)表格，具體的實(shí)現(xiàn)代碼，大家可以自己寫(xiě)吧2008-12-12
JavaScript Archive Network 集合...2007-05-05
JavaScript實(shí)現(xiàn)移動(dòng)端帶transition動(dòng)畫(huà)的輪播效果
這篇文章主要介紹了JavaScript原生實(shí)現(xiàn)帶transition動(dòng)畫(huà)的自動(dòng)+手動(dòng)輪播效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
微信小程序使用WxJava獲取用戶(hù)手機(jī)號(hào)步驟
這篇文章主要介紹了微信小程序使用WxJava獲取用戶(hù)手機(jī)號(hào)的相關(guān)資料,還詳細(xì)講解了WxMpService接口的主要功能和常用方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
一直在使用js相關(guān)的東西，但很少作總結(jié)，今天遇到操作js數(shù)組的一些問(wèn)題，對(duì)js的數(shù)組有了更進(jìn)一步的認(rèn)識(shí)2015-04-04