這篇文章主要介紹了JS內(nèi)存生命周期,棧內(nèi)存與堆內(nèi)存,深淺拷貝是什么,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名申請(qǐng)、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、元寶山網(wǎng)站維護(hù)、網(wǎng)站推廣。
在講棧內(nèi)存與堆內(nèi)存之前,大家應(yīng)該都知道JS分為兩種數(shù)據(jù)類型:
String , Number , Boolean , null , undefined , Symbol (大小固定,體積輕量,相對(duì)簡(jiǎn)單)
Object , Array , Function (大小不一定,占用空間較大,相對(duì)復(fù)雜)
var a=true; //布爾型,基本數(shù)據(jù)類型var b='jack'; //字符型,基本數(shù)據(jù)類型var c=18; //數(shù)值型,基本數(shù)據(jù)類型var d={name:'jack'}; //對(duì)象,引用數(shù)據(jù)類型var d=[0,1,2,3,4,5]; //數(shù)組,引用數(shù)據(jù)類型復(fù)制代碼
正是因?yàn)閿?shù)據(jù)類型的不同,所以他們的存放方式也不同,就和現(xiàn)實(shí)生活中窮人和富人的住所完全不一樣(扯遠(yuǎn)了)。我們先來(lái)看一張圖:
可以看到, a
, b
, c
都是基本數(shù)據(jù)類型, d
和 e
都是引用數(shù)據(jù)類型,他們?cè)诖娣欧绞缴嫌兄举|(zhì)性的區(qū)別,基本數(shù)據(jù)類型的值是存放在棧內(nèi)存中的,而引用數(shù)據(jù)類型的值是存放在堆內(nèi)存中的,棧內(nèi)存中僅僅存放著它在棧內(nèi)存中的引用(即它在堆內(nèi)存中的地址),就和它的名字一樣,引用數(shù)據(jù)類型
上面講的是存儲(chǔ),接下來(lái)說(shuō)一下變量的訪問(wèn),基本數(shù)據(jù)類型可以直接從棧內(nèi)存中訪問(wèn)變量的值,而引用數(shù)據(jù)類型要先從棧內(nèi)存中找到它對(duì)應(yīng)的引用地址,再拿著這個(gè)引用地址,去堆內(nèi)存中查找,才能拿到變量的值
上面已經(jīng)和大家說(shuō)過(guò)了基本數(shù)據(jù)類型與引用數(shù)據(jù)類型在存儲(chǔ)上的不同,那么,接下來(lái)說(shuō)的這個(gè)深淺拷貝,想必大家也在面試題中經(jīng)常碰到,老方式,先來(lái)看一段代碼
var name='jack';var obj={ age:24};var nameCopy=name;var objCopy=obj; nameCopy='bob'; objCopy.age=15;console.log(name); //jackconsole.log(obj.age); //15復(fù)制代碼
你會(huì)發(fā)現(xiàn), name
是沒(méi)有被影響的,而我們命名是修改objCopy.age
,為什么還會(huì)影響到 obj.age
呢,這就是因?yàn)樯顪\拷貝的問(wèn)題在搗鬼,先來(lái)看下下面的一張圖
之所以會(huì)出現(xiàn)這種情況,是因?yàn)镴S對(duì)于基本類型和引用類型的,當(dāng)我們?cè)趶?fù)制引用類型的時(shí)候,復(fù)制的是該對(duì)象的引用地址,所以,在執(zhí)行 var objCopy=obj;
的時(shí)候,將 obj
的引用地址復(fù)制給了 objCopy
,所以,這兩個(gè)對(duì)象實(shí)際指向的是同一個(gè)對(duì)象,即改變 objCopy
的同時(shí)也改變了 obj
的值,我們將這種情況稱為淺拷貝,僅僅復(fù)制了對(duì)象的引用,并沒(méi)有開(kāi)辟新的內(nèi)存,拿人手短,拷貝地太淺了。(只有引用類型才會(huì)出現(xiàn)淺拷貝的情況)
再來(lái)看接下來(lái)的一段代碼
var name='jack';var obj={ age:24};var nameCopy=name;var objCopy=JSON.parse(JSON.stringify(obj)); nameCopy='bob'; objCopy.age=15;console.log(name); //jackconsole.log(obj.age); //24復(fù)制代碼
可以發(fā)現(xiàn),在經(jīng)過(guò) JSON.parse(JSON.stringify(obj))
轉(zhuǎn)換了以后,淺拷貝不復(fù)存在,這一波是深拷貝,深拷貝開(kāi)辟了新的堆內(nèi)存地址,并且將對(duì)象的引用指向了新開(kāi)辟的內(nèi)存地址,和前面復(fù)制的對(duì)象完全獨(dú)立,自立根生,拷貝地很深,學(xué)功夫?qū)W到家,自立門戶的感覺(jué)。
var objCopy=Object.assign({},obj); //對(duì)象深拷貝的方法 Object.assign var arrayCopy=array.concat(); //數(shù)組深拷貝的方法 concat() (數(shù)組無(wú)嵌套對(duì)象或者數(shù)組可用) var arrayCopy=array.slice(); //數(shù)組深拷貝的方法 slice() (數(shù)組無(wú)嵌套對(duì)象或者數(shù)組可用) JSON.parse(JSON.stringify(array)) //順帶提下,JSON.parse(JSON.stringify()) 數(shù)組和對(duì)象通用復(fù)制代碼
接著上面的數(shù)組容易踩坑的地方 ,來(lái)看一個(gè)例子
var array = [{name: 'jack'}, ['old']];var arrCopy = array.concat(); arrCopy[0].name='new';console.log(array); // [{name: 'new'}, ['old']]console.log(arrCopy); // [{name: 'new'}, ['old']]復(fù)制代碼
可以清楚地看到(數(shù)組無(wú)嵌套對(duì)象或者數(shù)組可用的情況下用 concat
和 slice
才有效)
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享JS內(nèi)存生命周期,棧內(nèi)存與堆內(nèi)存,深淺拷貝是什么內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,遇到問(wèn)題就找創(chuàng)新互聯(lián),詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
標(biāo)題名稱:JS內(nèi)存生命周期,棧內(nèi)存與堆內(nèi)存,深淺拷貝是什么
地址分享:http://aaarwkj.com/article44/igsdhe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)