寫(xiě)在最前面：在javascript欄目下這是我即將開(kāi)始寫(xiě)的一個(gè)系列，主要是在框架橫行的時(shí)代，雖然上班用的是框架，但是對(duì)于面試，以及技術(shù)進(jìn)階，JS基礎(chǔ)知識(shí)的鋪墊是錦上添花，也是不得不學(xué)習(xí)的一塊知識(shí)，雖然開(kāi)汽車的不需要很懂汽車，只需要掌握汽車的常用功能即可。但是如果你懂汽車，那你也能更好地開(kāi)車，同理。當(dāng)然，一篇文章也不會(huì)光光只講一個(gè)知識(shí)點(diǎn)，一般會(huì)將有關(guān)聯(lián)的知識(shí)點(diǎn)串聯(lián)起來(lái)，一邊記錄自己的學(xué)習(xí)，一邊分享自己的學(xué)習(xí)，互勉！如果可以的話，也請(qǐng)給我點(diǎn)個(gè)贊，你的點(diǎn)贊也能讓我更加努力地更新！

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的浪卡子網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

概覽食用時(shí)間： 6-12分鐘難度： 簡(jiǎn)單，別跑，看完再走JS內(nèi)存生命周期分配內(nèi)存內(nèi)存的讀與寫(xiě)釋放內(nèi)存棧內(nèi)存與堆內(nèi)存JS數(shù)據(jù)類型

在講棧內(nèi)存與堆內(nèi)存之前，大家應(yīng)該都知道JS分為兩種數(shù)據(jù)類型：

基本數(shù)據(jù)類型

String , Number , Boolean , null , undefined , Symbol （大小固定，體積輕量，相對(duì)簡(jiǎn)單）

引用數(shù)據(jù)類型

Object , Array , Function (大小不一定，占用空間較大，相對(duì)復(fù)雜)

內(nèi)存存儲(chǔ)機(jī)制

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ù)類型

內(nèi)存訪問(wèn)機(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到家，自立門(mén)戶的感覺(jué)。

另外實(shí)現(xiàn)深拷貝的方法（更多方式請(qǐng)自行百度）

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才有效)

系列目錄一張紙搞懂JS系列（1）之編譯原理，作用域，作用域鏈，變量提升，暫時(shí)性死區(qū)一張紙搞懂JS系列（2）之JS內(nèi)存生命周期，棧內(nèi)存與堆內(nèi)存，深淺拷貝一張紙搞懂JS系列（3）之垃圾回收機(jī)制，內(nèi)存泄漏，閉包

更多相關(guān)免費(fèi)學(xué)習(xí)推薦：javascript（視頻）

當(dāng)前標(biāo)題：一張紙搞懂JS系列（2）之JS內(nèi)存生命周期，棧內(nèi)存與堆內(nèi)存，深淺拷貝
路徑分享：http://m.rwnh.cn/article24/cgisce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站收錄、建站公司、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(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)