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