javascript 關(guān)于賦值、淺拷貝、深拷貝的個(gè)人理解
一、棧、堆、指針地址
棧內(nèi)存:個(gè)人理解是,基本數(shù)據(jù)類型和引用數(shù)據(jù)類型都會用到的一個(gè)空間,這個(gè)空間以key-value形式存在,value本身不可修改,只能賦值替換;
堆內(nèi)存:堆,就是堆積,每一個(gè)被開辟的空間可以想象成一個(gè)空紙盒子,紙盒子所在的紙盒子堆就是 “堆” ?;緮?shù)據(jù)類型沒有堆的概念。堆,只針對引用數(shù)據(jù)類型。存儲方式應(yīng)該是以對象(object)形式保存,對象內(nèi)容包含key-value形式數(shù)據(jù),value本身同樣不可修改,只能賦值替換;
指針地址:針對引用數(shù)據(jù)類型在棧保存的值就是指針地址,地址指向保存在堆里面的對象。
二、賦值
賦值分兩個(gè),一個(gè)是基本數(shù)據(jù)類型的賦值,一個(gè)是引用數(shù)據(jù)類型的賦值,基本數(shù)據(jù)類型賦的是 “值”,引用數(shù)據(jù)類型賦的是 “指針地址”。
1.基本數(shù)據(jù)類型賦值
//在棧內(nèi)開辟一個(gè)空間,空間名稱叫a,存放值1; var a = 1; //在棧內(nèi)開辟一個(gè)空間,空間名字叫b。接著先把a(bǔ)的值1復(fù)制一份,然后存放進(jìn)b var b = a;
如下圖:

2.引用數(shù)據(jù)類型賦值
//首先在棧開辟一個(gè)空間a存放指針地址,設(shè)指針地址為address1;同時(shí)會在堆里面開辟一個(gè)空間放置對象數(shù)據(jù) 2 var a = {
no: 1,
per: {
name: "jack"
},
per2: {
name: "rose"
}
}
//a賦值給b,此時(shí)b會在棧開辟一個(gè)空間b,用來放置address1,這個(gè)指針指向a所在堆的對象數(shù)據(jù)
var b = a;
//修改賦值后的值b,其實(shí)就是修改b的指針address1所指向的對象數(shù)據(jù)
b.no = 1314;
//修改b會影響原數(shù)據(jù)(所有層次的數(shù)據(jù)都會影響)
//這個(gè)原數(shù)據(jù)其實(shí)不是原數(shù)據(jù),因?yàn)閍和b其實(shí)都是同一個(gè)數(shù)據(jù)
//就像從中國去美國,可以從a地點(diǎn)(比如北京)或者b地點(diǎn)(比如上海)坐飛機(jī)去,但是到達(dá)的都是同一個(gè)地方(也就是對象數(shù)據(jù))
b.per.name = "王五";
console.log(a, b)
上面代碼打印如圖:
對b的修改會影響a原本的值。對a的修改同樣會同步b的值,對a的修改本人沒有寫出,你們可以自己試試,結(jié)果是一樣的。
針對上面的代碼,引用數(shù)據(jù)類型賦值,如下圖所示:

無論修改a對象還是b對象,都是在修改 “obj” 這個(gè)對象
三、淺拷貝
引用數(shù)據(jù)類型的淺拷貝,代碼如下:
//在棧開辟一個(gè)空間a,存放a的指針地址,設(shè)指針地址為address2a,同時(shí)在堆開辟一個(gè)空間,設(shè)這空間為A,存放a對象數(shù)據(jù)
var a = {
no: 1,
per: {
name: "jack",
},
per2: {
name: "rose"
}
}
//在棧開辟一個(gè)空間b,存放b的指針地址,設(shè)指針地址為address2b,同時(shí)在堆開辟一個(gè)空間,設(shè)這空間為B,存放b對象數(shù)據(jù)
var b = {};
//對a的數(shù)據(jù)進(jìn)行循環(huán),判斷如果有key,就把值賦到B對應(yīng)的key位置
//這個(gè)循環(huán),遇到數(shù)據(jù)類型為基本數(shù)據(jù)類型,賦的是值;遇到引用數(shù)據(jù)類型,賦的是指針地址
for(var p in a) {
if(a.hasOwnProperty(p)) {
b[p] = a[p]
}
}
//對b的第一層修改
b.no = 1314;
b.per2 = [];
//對b的第二層修改
b.per.name = "王五";
//淺拷貝,修改b后,第一層修改都不影響原數(shù)據(jù),第二層以及以上層次的修改都影響原數(shù)據(jù)
//當(dāng)前沒有寫第三層及以上層次,可自行測試。
console.log(a, b)
運(yùn)行結(jié)果如圖:

可以理解為,a原本的東西被完全復(fù)制了一份,放到了b里面,然會對b的操作,就只關(guān)b的事情了。a原本是什么值,現(xiàn)在依然是什么值,b的修改對a完全沒有影響。
最后,可用下圖表示深拷貝:

四、深拷貝
深拷貝,說白了,就是對淺拷貝的遞歸,也就是淺拷貝章節(jié)所述的,淺拷貝第一層已經(jīng)被完全拷貝到新的地方,然后第二層以及以上層次,它們的屬性值又將都會被拷貝到新的地方,最后就井水不犯河水了。
代碼如下:
//在棧開辟一個(gè)空間a,存放a的指針地址,設(shè)指針地址為address3a,同時(shí)在堆開辟一個(gè)空間,設(shè)這空間為space1a,存放a對象數(shù)據(jù)
var a = {
no: 2,
per: {
name: "jack"
},
per2: {
name: "rose"
}
}
//用遞歸的方式對a進(jìn)行拷貝屬性和值,然后賦值給temp,然后return出去。此時(shí)不拷貝指針地址。
function getDeep(obj) {
var temp = Array.isArray(obj) ? [] : {};
for(var p in obj) {
if(typeof obj[p] == "object") {
temp[p] = getDeep(obj[p])
} else {
temp[p] = obj[p]
}
}
return temp;
}
//在棧開辟一個(gè)空間b,存放b的指針地址,設(shè)指針地址為address3b。同時(shí)b在堆開辟一個(gè)空間,設(shè)這空間為D,存放temp的對象數(shù)據(jù)
var b = getDeep(a);
//深拷貝后,修改b的值,不論修改屬性值,還是整個(gè)值替換都不影響原數(shù)據(jù)a
b.no = 1314;
b.per = []
b.per2 = {
name:"王五"
}
console.log(a, b)
淺拷貝只拷貝了第一層,深拷貝是拷貝到最后一層。代碼運(yùn)行結(jié)果如圖:

可以理解為,a原本的東西被完全復(fù)制了一份,放到了b里面,然會對b的操作,就只關(guān)b的事情了。a原本是什么值,現(xiàn)在依然是什么值,b的修改對a完全沒有影響。
最后,可用下圖表示深拷貝:

五、總結(jié)
1.賦值:
基本數(shù)據(jù)類型就是類似a同學(xué)有一臺電腦,b同學(xué)也想要,就也給b同學(xué)買了一臺一模一樣的電腦b,電腦a和電腦b各自怎么被操作都是a同學(xué)和b同學(xué)各自的事,電腦顯示互不影響(數(shù)據(jù)結(jié)果);
引用數(shù)據(jù)類型就是只有一臺電腦,放在了電腦室,a同學(xué)和b同學(xué)各自從宿舍到電腦室操作電腦,都能影響電腦顯示;在a同學(xué)和b同學(xué)的眼里,最后結(jié)果這臺電腦顯示什么,取決于最后一個(gè)操作電腦的同學(xué)(數(shù)據(jù)結(jié)果);
2.淺拷貝:
a同學(xué)有一臺筆記本電腦并且配置了全套裝備,觸感舒爽的鼠標(biāo)、按鍵響亮的機(jī)械鍵盤等。b同學(xué)沒錢買電腦,但是又很想體驗(yàn),所以先買了和a同學(xué)一樣的鼠標(biāo)鍵盤自個(gè)先看著爽。然后向a同學(xué)借電腦過來玩。a同學(xué)和b同學(xué)各自的鼠標(biāo)鍵盤出了啥問題,兩個(gè)人之間互不影響對方的使用。而對電腦的操作就是誰最后操作了電腦,電腦就是顯示最后那個(gè)人的操作界面(數(shù)據(jù)修改)。
3.深拷貝:
a同學(xué)有筆記本+全套裝備,b同學(xué)羨慕不已,自己讓a同學(xué)照著買了一整套一模一樣的給自己,但是他們各自的使用電腦情況,取決于他們各自的操作,電腦之間互不影響(數(shù)據(jù)結(jié)果)。
以上純屬個(gè)人理解,有誤勿噴請指出,謝謝!
相關(guān)文章
javascript實(shí)現(xiàn) 在光標(biāo)處插入指定內(nèi)容
javascript實(shí)現(xiàn) 在光標(biāo)處插入指定內(nèi)容...2007-05-05
原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
在一個(gè)js文件里遠(yuǎn)程調(diào)用jquery.js會在ie8下的一個(gè)奇怪問題
這樣的腳本你在ie8下調(diào)用,在ie8地址欄下按下回車后調(diào)用jquery的對像、方法什么的沒有問題,但是刷新之后就有問題。就是刷新之后無論怎樣你要在地址欄按一下回車。2010-11-11
JS復(fù)制對應(yīng)id的內(nèi)容到粘貼板(Ctrl+C效果)
這篇文章主要給大家介紹了利用JS實(shí)現(xiàn)復(fù)制指定對應(yīng)id的內(nèi)容到粘貼板(Ctrl+C效果),文中給出了詳細(xì)的介紹和示例代碼,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01
JS動態(tài)修改表格cellPadding和cellSpacing的方法
這篇文章主要介紹了JS動態(tài)修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
純css+js寫的一個(gè)簡單的tab標(biāo)簽頁帶樣式
最近經(jīng)常要用tab標(biāo)簽頁,于是就寫了一個(gè)簡單的tab標(biāo)簽頁,純css+js寫的,帶樣式。大家可以參考下2014-01-01
JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn) 加上你的CSS完全可以與EXT媲美哦2009-08-08
JS前端千萬級彈幕數(shù)據(jù)循環(huán)優(yōu)化示例
這篇文章主要為大家介紹了JS前端一千萬條彈幕數(shù)據(jù)循環(huán)優(yōu)化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07

