js中變量的連續(xù)賦值(實例講解)
今天遇到了一個連續(xù)賦值的經(jīng)典案例,網(wǎng)友們給出的答案也是五花八門,看起來有些繁瑣,我也來說說自己的看法。
下面就是這個經(jīng)典案例:
var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a); console.log(b); console.log(a.x); console.log(b.x);
我們先來看一下普通連續(xù)賦值,即:變量賦值的類型是數(shù)據(jù)類型值
var a=3; var b=a=5; console.log(a); console.log(b);
一般來說,等號賦值的方向是從右至左,那么上面的代碼等同于下面這段代碼,那么我們就用下面這段代碼來解釋上面的代碼:
var a=3; //全局變量a被賦值為3 var a=5; //此時a被重新賦值為5 var b=a; //將a的值賦給全局變量b console.log(a);//a最終的值就是第二次被賦的值:5 console.log(b);//按照代碼執(zhí)行順序b的值也是:5
上面的小案例用來拋磚引玉,現(xiàn)在我們來分析這個經(jīng)典案例:
var a = {n: 1};//a第一次被賦值,是一個引用類型值,請記得變量賦值為引用類型值的時候,通過變量改變這個對象的時候,對象本身也發(fā)生了變化 var b = a;//b被賦值為a,因此b就是對象{n:1} a.x = a = {n: 2}; //這個賦值與之前的簡單案例有所不同,a.x指的是給a添加一個x屬性,在js的運算中“.”和"="運算符同時出現(xiàn),會先執(zhí)行"."運算 //因此,賦值順序被改變了,是先給a.x賦值,再給a賦值 //就是先執(zhí)行:a.x={n:2},注意這里a并未改變,是給a的x屬性賦值為{n:2},a還是{n:1} //再回到我代碼中的第一句話,這個賦值行為,改變了{n:1}這個對象,即給它增加了名為x的屬性 //再執(zhí)行a={n:2},這是變量a不再是對象{n:1},而被重新賦值為一個新的對象{n:2}; console.log(a);//自然此時a是對象{n:2} console.log(b);//a的二次賦值,并沒有影響b,b還是對象{n:1},但是由于a在重新賦值之前,給{n:1}這個對象,增加了一個x屬性,因此,這時的b已經(jīng)有了x屬性 console.log(a.x);//{n:2}對象沒有x屬性,所以結(jié)果是undefined console.log(b.x);//綜上所述,這個結(jié)果是{n:2}
以上這篇js中變量的連續(xù)賦值(實例講解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
微信小程序?qū)崿F(xiàn)客服功能(客服消息)的全過程
在最近做的微信小程序中需要實現(xiàn)一個自帶的客服功能,下面這篇文章主要給大家介紹了關于微信小程序?qū)崿F(xiàn)客服功能(客服消息)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運行的程序?或批處理文件的最
這篇文章主要介紹了'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運行的程序?或批處理文件的最新解決方法,文中給大家補充介紹了webpack-dev-server的介紹與用法,需要的朋友可以參考下2023-02-02JavaScript實現(xiàn)購物車圖片局部放大預覽效果
這篇文章主要為大家詳細介紹了JavaScript如何通過canvas簡單實現(xiàn)購物車圖片放大預覽效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-03-03JavaScript事件學習小結(jié)(二)js事件處理程序
這篇文章主要介紹了JavaScript事件學習小結(jié)(二)js事件處理程序的相關資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06js獲取對象,數(shù)組所有屬性鍵值(key)和對應值(value)的方法示例
這篇文章主要介紹了js獲取對象,數(shù)組所有屬性鍵值(key)和對應值(value)的方法,涉及javascript對于對象、數(shù)組鍵名與鍵值遍歷相關操作技巧,需要的朋友可以參考下2019-06-06