JavaScript 連等賦值

JavaScript賦值運算是最為簡單的操作之一。

甚至可以說，即便最為基礎薄弱的學習者，對此操作的應用也是充滿信心。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落";

上述程式碼宣告變數webName，並賦值"螞蟻部落"。

毫無疑問，上面的賦值操作極其簡單，再來看如下程式碼：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let oneObj={webName:"螞蟻部落"};
let twoObj=oneObj;
oneObj.ant=oneObj={webName:"百度"};
// 列印結果
console.log(oneObj.ant);
console.log(twoObj.ant);

程式碼執行效果截圖如下：

上述程式碼是一個連等賦值，列印結果很多朋友可能無法理解。

很多看似簡單的操作，其中也牽涉著很多重要的知識，下面分佈進行分析。

一.左值與右值：

看如下形式賦值語句：

[JavaScript] 純文字檢視 複製程式碼
A=B

上面是一個賦值表示式，兩個運算元也是表示式，但是有區別：

（1）.A必須是左值。

（2）.B可以是任意表示式。

左值強調的是引用地址，也就是儲存資料的記憶體地址，右值強調的是資料值，也就是將要被儲存的資料。

賦值運算，首先會計算左側運算元，然後再計算右側運算元：

（1）.首先計算運算元A，得到一個引用地址refA。

（2）.然後計算運算元B，得到一個值valB。

（3）.最後將值valB儲存到refA引用指向的地址，並返回值valB。

更多關於左值與右值內容參閱JavaScript 左值與右值一章節。

二.連等賦值結合性：

看如下賦值語句結構：

[JavaScript] 純文字檢視 複製程式碼
表示式一=表示式二=表示式三=表示式四

連等賦值遵循右結合規則，上面連等賦值等同於：

[JavaScript] 純文字檢視 複製程式碼
表示式一=(表示式二=(表示式三=表示式四))

從整體來看，表示式一與運算子右側所有內容形成一個大的賦值語句，右側又可以分解為小的賦值語句。

又由於，對單個賦值語句，首先計算左側運算數，然後再計算右側運算數，那麼上述連等賦值計算順序如下：

（1）.計算表示式一，得到ref1。

（2）.計算表示式二，得到ref2。

（3）.計算表示式三，得到ref3。

（4）.計算表示式四，得到val4。

三.程式碼分析如下：

經過上面的知識準備，下面再來分析文章開頭提出的問題。

[JavaScript] 純文字檢視 複製程式碼
let oneObj={webName:"螞蟻部落"};
let twoObj=oneObj;
oneObj.ant=oneObj={webName:"百度"};

為了闡述方便，分別給兩個物件直接量取別名mayi與baidu。

程式碼分析如下：

（1）.前兩條語句很簡單，oneObj與twoObj指向同一個物件。

（2）.下面分析第三條語句，它等同於oneObj.ant=(oneObj={webName:"百度"})。

（3）.首先計算oneObj.ant，為oneOb所指向的物件新增一個屬性ant，物件mayi變為{webName:"螞蟻部落",ant:undefined}，並得到oneObj.ant地址。

（4）.然後將物件baidu賦值給oneObj，這時oneObj變為{webName:"百度"}，並返回物件baidu，再將baidu賦值給oneObj.ant（不要以為這裡的oneObj指向賦值後的新物件{webName:"百度"}，它依然指向最初的物件mayi，因為對它求值在oneObj={webName:"百度"}之前），那麼mayi物件變為{webName:"螞蟻部落",ant:{webName:"百度"}}，twoObj指向此物件，所以twoObj.ant的值為{webName:"百度"}。