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