JavaScript內(nèi)存及淺拷貝和深拷貝

拷貝,理解為復(fù)制的意思寻馏,拷貝就是復(fù)制已經(jīng)存在的一個(gè)變量給另外一個(gè)變量棋弥,如:var a = 10; var b = a; b拷貝了a诚欠。那么 a 等不等于 b 呢顽染?要搞明白我們得先來(lái)了解下JavaScript的內(nèi)存管理機(jī)制漾岳。

JavaScript的內(nèi)存管理機(jī)制

內(nèi)存的周期是: 分配 -> 使用 -> 釋放

1. 分配:

變量被定義時(shí)候分配內(nèi)存,內(nèi)存存放又分為棧粉寞、堆尼荆、地址池。其中存放變量唧垦,且有固定的大小(基礎(chǔ)數(shù)據(jù))捅儒,存放復(fù)雜對(duì)象(引用數(shù)據(jù)類型),存放常量振亮。

注意:JS不允許直接訪問(wèn)堆內(nèi)存中的位置巧还,因此我們不能直接操作對(duì)象的堆內(nèi)存空間。在操作對(duì)象時(shí)坊秸,實(shí)際上是在操作對(duì)象的引用而不是實(shí)際的對(duì)象麸祷。因此,引用類型的值都是按引用訪問(wèn)的妇斤。這里的引用摇锋,我們可以粗淺地理解為保存在棧內(nèi)存中的一個(gè)地址,該地址與堆內(nèi)存的實(shí)際值相關(guān)聯(lián)站超。


2. 使用:

對(duì)分配內(nèi)存進(jìn)行讀取與寫入的操作荸恕。如: var a = 1;a = 2; // 寫入內(nèi)存

3. 釋放:

所分配的內(nèi)存確實(shí)已經(jīng)不再需要了死相,釋放這過(guò)程涉及了垃圾回收機(jī)制融求,Javascript內(nèi)嵌了垃圾收集器,用來(lái)跟蹤內(nèi)存的分配和使用算撮,以便當(dāng)分配的內(nèi)存不再使用時(shí)生宛,自動(dòng)釋放它(如果沒(méi)有引用指向該對(duì)象(零引用),對(duì)象將被垃圾回收機(jī)制回收)肮柜。垃圾收集器會(huì)按照固定的時(shí)間間隔陷舅,或代碼執(zhí)行中預(yù)定的收集時(shí)間,周期性地執(zhí)行這一操作审洞。如下:

function fun1(){ var obj = {name:'ja'};}??var f1 = fun1(); obj?會(huì)被回收莱睁,因?yàn)関ar obj使用完

function fun2(){var obj = {name:'va'};return obj;}var f2 = fun2(); obj 不會(huì)被回收,因?yàn)楸籪2引用芒澜,f2屬于全局變量仰剿,頁(yè)面沒(méi)有卸載的情況下是不會(huì)被回收的



JavaScript的淺拷貝和深拷貝

基本數(shù)據(jù)類型不存在淺深拷貝問(wèn)題,引用類型存在

1. 淺拷貝:淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針痴晦,而不復(fù)制對(duì)象本身南吮,新舊對(duì)象還是共享同一塊內(nèi)存,修改對(duì)象誊酌,原對(duì)象也會(huì)改變部凑。方法:Object.assign()(當(dāng)object只有一層的時(shí)候露乏,是深拷貝)、Array.prototype.concat()砚尽、Array.prototype.slice()

2. 深拷貝:深拷貝會(huì)另外創(chuàng)造一個(gè)一模一樣的對(duì)象施无,新對(duì)象跟原對(duì)象不共享內(nèi)存,修改新對(duì)象不會(huì)改到原對(duì)象必孤。方法:JSON.parse(JSON.stringify())(但不能處理函數(shù)、underfined)瑞躺、遍歷對(duì)象(只有一層對(duì)象直接循環(huán)敷搪,兩層對(duì)象則需要判斷類型)、遞歸(多層對(duì)象)


淺拷貝:

深拷貝:


一層對(duì)象深拷貝


兩層對(duì)象深拷貝


遞歸拷貝:

var p = { "id":"007","name":"劉德華","wife":{"id":"008","name":"劉德的妻子","address":{"city":"北京","area":"海淀區(qū)"}}}

//寫函數(shù)

function copyObj(obj){let newObj={};for(let key in obj){if(typeof obj[key] =='object'){//如:key是wife,引用類型,那就遞歸newObj[key] = copyObj(obj[key])}else{//基本類型,直接賦值newObj[key] = obj[key];}}return newObj;}

let pNew = copyObj(p);pNew.wife.name="張三瘋";pNew.wife.address.city = "香港";console.log(pNew);console.log(p);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末幢哨,一起剝皮案震驚了整個(gè)濱河市赡勘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌捞镰,老刑警劉巖闸与,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異岸售,居然都是意外死亡践樱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門凸丸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)拷邢,“玉大人,你說(shuō)我怎么就攤上這事屎慢〔t稼!?“怎么了?”我有些...
    開(kāi)封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵腻惠,是天一觀的道長(zhǎng)环肘。 經(jīng)常有香客問(wèn)我,道長(zhǎng)集灌,這世上最難降的妖魔是什么悔雹? 我笑而不...
    開(kāi)封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮绝页,結(jié)果婚禮上荠商,老公的妹妹穿的比我還像新娘。我一直安慰自己续誉,他們只是感情好莱没,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著酷鸦,像睡著了一般饰躲。 火紅的嫁衣襯著肌膚如雪牙咏。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天嘹裂,我揣著相機(jī)與錄音妄壶,去河邊找鬼。 笑死寄狼,一個(gè)胖子當(dāng)著我的面吹牛丁寄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播泊愧,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼伊磺,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了删咱?” 一聲冷哼從身側(cè)響起屑埋,我...
    開(kāi)封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎痰滋,沒(méi)想到半個(gè)月后摘能,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡敲街,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年团搞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片聪富。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡莺丑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出墩蔓,到底是詐尸還是另有隱情梢莽,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布奸披,位于F島的核電站昏名,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏阵面。R本人自食惡果不足惜轻局,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望样刷。 院中可真熱鬧仑扑,春花似錦、人聲如沸置鼻。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)箕母。三九已至储藐,卻和暖如春俱济,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背钙勃。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工蛛碌, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辖源。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓蔚携,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親克饶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子浮梢,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 面試的時(shí)候,經(jīng)常會(huì)被問(wèn)到j(luò)s的淺拷貝和深拷貝問(wèn)題彤路,很多時(shí)候能夠想清楚是怎么回事,但是實(shí)在描述不出來(lái)芥映,可能還是自己比...
    肆意咯咯咯閱讀 364評(píng)論 0 3
  • 關(guān)于JavaScript的淺拷貝和深拷貝 在JS中有一些基本類型像是Number洲尊、String、Boolean奈偏,而...
    成都reactnative閱讀 312評(píng)論 0 0
  • 前言 淺拷貝和深拷貝在前端開(kāi)發(fā)中是非常重要的知識(shí)點(diǎn)坞嘀,有時(shí)候面試官也非常喜歡問(wèn)到這點(diǎn),相信很多人只是聽(tīng)過(guò)這兩個(gè)詞惊来,不...
    蛙哇閱讀 332評(píng)論 0 0
  • ??在說(shuō)深拷貝丽涩、淺拷貝之前,首先先說(shuō)一下js里存在的兩種數(shù)據(jù)類型:基本數(shù)據(jù)類型和引用數(shù)據(jù)類型裁蚁。 區(qū)別:基本數(shù)據(jù)類型...
    風(fēng)居住的街道閱讀 527評(píng)論 1 2
  • 值類型與引用類型 談淺拷貝與深拷貝之前矢渊,我們需要先理清一個(gè)概念,即值類型與引用類型枉证。 什么是值類型與引用類型矮男?這要...
    franose閱讀 620評(píng)論 1 8