摘要：所以相對(duì)于簡(jiǎn)單數(shù)據(jù)類型而言，他們占用內(nèi)存比較小，如果放在堆中，查找會(huì)浪費(fèi)很多時(shí)間，而把堆中的數(shù)據(jù)放入棧中也會(huì)影響棧的效率。六總結(jié)本文總結(jié)了數(shù)據(jù)類型及其聲明賦值更新時(shí)在內(nèi)存堆棧中的表現(xiàn)，可以更深入的理解這些數(shù)據(jù)類型。

JS的數(shù)據(jù)類型已經(jīng)是大家都很熟悉的東西了，但是大家是否對(duì)這些數(shù)據(jù)類型在內(nèi)存中的分配了解，甚至在操作這些變量時(shí)，內(nèi)存中是如何表現(xiàn)的，本文將對(duì)這些做一個(gè)總結(jié)。

ECMAScript 變量可能包含兩種不同數(shù)據(jù)類型的值:基本類型值和引用類型值。在將一個(gè)值賦給變量時(shí)，解析器必須確定這個(gè)值是基本類型值還是引用類型值。

基本類型值 指的是簡(jiǎn)單的數(shù)據(jù)段，如: Undefined、Null、Boolean、Number 和 String。這 5 種基本數(shù)據(jù)類型是按值訪問的，因?yàn)榭梢圆僮鞅４嬖谧兞恐械膶?shí)際的值。

引用類型值指 那些可能由多個(gè)值構(gòu)成的對(duì)象，并且引用類型的值是保存在內(nèi)存中的對(duì)象，如: Object、Array、Function、Date對(duì)象等。與其他語(yǔ)言不同，JavaScript 不允許直接訪問內(nèi)存中的位置， 也就是說不能直接操作對(duì)象的內(nèi)存空間。在操作對(duì)象時(shí)，實(shí)際上是在操作對(duì)象的引用而不是實(shí)際的對(duì)象。 為此，引用類型的值是按引用訪問的。

要說明這個(gè)問題需要先來了解一下棧內(nèi)存和堆內(nèi)存。
基本類型值是存儲(chǔ)在棧中的簡(jiǎn)單數(shù)據(jù)段，也就是說，他們的值直接存儲(chǔ)在變量訪問的位置。
堆是存放數(shù)據(jù)的基于散列算法的數(shù)據(jù)結(jié)構(gòu)，在javascript中，引用值是存放在堆中的。

如以下代碼：

const a = 1;
const obj1 = {
    name: "小明",
    age: 18
}
const obj2 = obj1

在內(nèi)存中的表現(xiàn)為：

在變量聲明時(shí)，基本類型變量會(huì)直接在棧內(nèi)存中為它分配空間，變量值也是直接存儲(chǔ)在棧內(nèi)存中；
而基本類型變量的真實(shí)值是存儲(chǔ)在堆內(nèi)存中的，同時(shí)棧內(nèi)存中會(huì)保存一個(gè)指針，這個(gè)指針指向真實(shí)值在對(duì)內(nèi)存中的位置，也以理解為棧內(nèi)存中存放了引用類型值存儲(chǔ)的地址。
所以訪問基本類型的變量時(shí)，是直接訪問到棧內(nèi)存中其真正的值；而訪問引用類型的變量時(shí)，是通過棧內(nèi)存中保存的引用地址去訪問。所以在上例中，重新聲明了一個(gè)obj2，并將obj1賦給obj2 其實(shí)是將obj1存放的引用賦給了obj2，此時(shí)obj1和obj2的指針指向了堆內(nèi)存中的同一個(gè)對(duì)象，那么我們更改obj1的name屬性時(shí)obj2會(huì)變化，同樣更改obj2的name屬性時(shí)obj1也會(huì)變化。那么此時(shí)如果新聲明一個(gè)變量b = a會(huì)怎樣呢，因?yàn)槭腔绢愋透鞑挥绊憽?/p> 四、棧內(nèi)存堆內(nèi)存的區(qū)別

棧的優(yōu)勢(shì)就是存取速度比堆要快，僅次于直接位于CPU中的寄存器，但缺點(diǎn)是，存在棧中的數(shù)據(jù)大小與生存期必須是確定的，缺乏靈活性。堆的優(yōu)勢(shì)是可以動(dòng)態(tài)地分配內(nèi)存大小，生存期也不必事先告訴編譯器，垃圾收集器會(huì)自動(dòng)地收走這些不再使用的數(shù)據(jù)，但是缺點(diǎn)是由于在運(yùn)行時(shí)動(dòng)態(tài)分配內(nèi)存，所以存取速度較慢。

所以相對(duì)于簡(jiǎn)單數(shù)據(jù)類型而言，他們占用內(nèi)存比較小，如果放在堆中，查找會(huì)浪費(fèi)很多時(shí)間，而把堆中的數(shù)據(jù)放入棧中也會(huì)影響棧的效率。比如對(duì)象和數(shù)組是可以無限拓展的，正好放在可以動(dòng)態(tài)分配大小的堆中。

*注 ： 以下為c++中，對(duì)內(nèi)存與棧內(nèi)存的區(qū)別，很多地方相通，可輔助理解

主要的區(qū)別由以下幾點(diǎn)：
1、管理方式不同；
2、空間大小不同；
3、能否產(chǎn)生碎片不同；
4、生長(zhǎng)方向不同；
5、分配方式不同；
6、分配效率不同；
管理方式：對(duì)于棧來講，是由編譯器自動(dòng)管理，無需我們手工控制；對(duì)于堆來說，釋放工作由程序員控制，容易產(chǎn)生memory leak。（js有自己的垃圾回收機(jī)制，此條不適用）
空間大?。阂话銇碇v在32位系統(tǒng)下，堆內(nèi)存可以達(dá)到4G的空間，從這個(gè)角度來看堆內(nèi)存幾乎是沒有什么限制的。但是對(duì)于棧來講，一般都是有一定的空間大小的，例如，在VC6下面，默認(rèn)的?？臻g大小是1M（好像是，記不清楚了）。當(dāng)然，我們可以修改。
碎片問題：對(duì)于堆來講，頻繁的new/delete勢(shì)必會(huì)造成內(nèi)存空間的不連續(xù)，從而造成大量的碎片，使程序效率降低。對(duì)于棧來講，則不會(huì)存在這個(gè)問題，因?yàn)闂Ｊ窍冗M(jìn)后出的隊(duì)列，他們是如此的一一對(duì)應(yīng)，以至于永遠(yuǎn)都不可能有一個(gè)內(nèi)存塊從棧中間彈出，在他彈出之前，在他上面的后進(jìn)的棧內(nèi)容已經(jīng)被彈出，詳細(xì)的可以參考數(shù)據(jù)結(jié)構(gòu)，這里我們就不再一一討論了。
生長(zhǎng)方向：對(duì)于堆來講，生長(zhǎng)方向是向上的，也就是向著內(nèi)存地址增加的方向；對(duì)于棧來講，它的生長(zhǎng)方向是向下的，是向著內(nèi)存地址減小的方向增長(zhǎng)。
分配方式：堆都是動(dòng)態(tài)分配的，沒有靜態(tài)分配的堆。棧有2種分配方式：靜態(tài)分配和動(dòng)態(tài)分配。靜態(tài)分配是編譯器完成的，比如局部變量的分配。動(dòng)態(tài)分配由alloca函數(shù)進(jìn)行分配，但是棧的動(dòng)態(tài)分配和堆是不同的，他的動(dòng)態(tài)分配是由編譯器進(jìn)行釋放，無需我們手工實(shí)現(xiàn)。
分配效率：棧是機(jī)器系統(tǒng)提供的數(shù)據(jù)結(jié)構(gòu)，計(jì)算機(jī)會(huì)在底層對(duì)棧提供支持：分配專門的寄存器存放棧的地址，壓棧出棧都有專門的指令執(zhí)行，這就決定了棧的效率比較高。堆則是C/C++函數(shù)庫(kù)提供的，它的機(jī)制是很復(fù)雜的，例如為了分配一塊內(nèi)存，庫(kù)函數(shù)會(huì)按照一定的算法（具體的算法可以參考數(shù)據(jù)結(jié)構(gòu)/操作系統(tǒng)）在堆內(nèi)存中搜索可用的足夠大小的空間，如果沒有足夠大小的空間（可能是由于內(nèi)存碎片太多），就有可能調(diào)用系統(tǒng)功能去增加程序數(shù)據(jù)段的內(nèi)存空間，這樣就有機(jī)會(huì)分到足夠大小的內(nèi)存，然后進(jìn)行返回。顯然，堆的效率比棧要低得多。
從這里我們可以看到，堆和棧相比，由于大量new/delete的使用，容易造成大量的內(nèi)存碎片；由于沒有專門的系統(tǒng)支持，效率很低；由于可能引發(fā)用戶態(tài)和核心態(tài)的切換，內(nèi)存的申請(qǐng)，代價(jià)變得更加昂貴。所以棧在程序中是應(yīng)用最廣泛的，就算是函數(shù)的調(diào)用也利用棧去完成，函數(shù)調(diào)用過程中的參數(shù)，返回地址，EBP和局部變量都采用棧的方式存放。所以，我們推薦大家盡量用棧，而不是用堆。
雖然棧有如此眾多的好處，但是由于和堆相比不是那么靈活，有時(shí)候分配大量的內(nèi)存空間，還是用堆好一些。

如下例：

var lang = "Java";
lang = lang + "Script";

以上示例中的變量 lang 開始時(shí)包含字符串"Java"。而第二行代碼把 lang 的值重新定義為"Java" 與"Script"的組合，即"JavaScript"。實(shí)現(xiàn)這個(gè)操作的過程如下:首先創(chuàng)建一個(gè)能容納 10 個(gè)字符的 新字符串，然后在這個(gè)字符串中填充"Java"和"Script"，最后一步是銷毀原來的字符串"Java"和字 符串"Script"，因?yàn)檫@兩個(gè)字符串已經(jīng)沒用了。這個(gè)過程是在后臺(tái)發(fā)生的，而這也是在某些舊版本的瀏覽器(例如版本低于 1.0 的 Firefox、IE6 等)中拼接字符串時(shí)速度很慢的原因所在。但這些瀏覽器后來的版本已經(jīng)解決了這個(gè)低效率問題。
瀏覽器內(nèi)核的底層優(yōu)化尚不清楚，但是有人采用下面的方法進(jìn)行優(yōu)化，只看一下方法了解即可，因?yàn)闉g覽器內(nèi)核優(yōu)化之后效率已提高不必如此大費(fèi)周章。提高效率的辦法是用數(shù)組的join函數(shù)：
如：

var str ;
str = "this is a string";
str = str + ",another string.";
var tempArr = [] ,src,res;
src = "this is a string";
tempArr.push(src);
tempArr.push(",another string.");
res = tempArr.join("");

關(guān)于開發(fā)中需要注意的事項(xiàng)，主要是對(duì)于引用類型需要特別注意。
一、需要將原數(shù)據(jù) 存儲(chǔ)副本，并操作數(shù)據(jù)（如對(duì)請(qǐng)求回來的列表數(shù)據(jù)進(jìn)行過濾顯示）。這是個(gè)很常見的問題，基本都遇到過這種情況，應(yīng)該已經(jīng)有處理經(jīng)驗(yàn)。主要就是如果直接將原數(shù)據(jù)data賦值給新變量a，那么自己操作a時(shí)data的數(shù)據(jù)也會(huì)受到影響。解決辦法就是避免簡(jiǎn)單表面的進(jìn)行存副本操作，應(yīng)該存一個(gè)獨(dú)立的副本。如果數(shù)據(jù)源是數(shù)組結(jié)構(gòu)就Array.prototype.slice.call(arr), 如果數(shù)據(jù)源是對(duì)象結(jié)構(gòu)進(jìn)行拷貝，至于深拷貝還是淺拷貝看自己的需要。個(gè)人感覺可以形成一種編碼習(xí)慣，類似場(chǎng)景要操作這樣的數(shù)據(jù)時(shí)先存一個(gè)獨(dú)立的副本（當(dāng)然也要看需求是否需要，自行權(quán)衡）。

二、在MVVM框架中會(huì)經(jīng)常出現(xiàn) 如model的某項(xiàng)數(shù)據(jù)是層數(shù)較深的復(fù)雜結(jié)構(gòu)時(shí)，更改了數(shù)據(jù)項(xiàng)下的某個(gè)值時(shí)，view并不更新，因?yàn)関iew model覺得自己沒有變化，沒有通知view。比如react-redux中，action觸發(fā)的reducer更新了store下某項(xiàng)深結(jié)構(gòu)數(shù)據(jù)下的某個(gè)值，又比如vue中簡(jiǎn)單更改data中數(shù)組的某一項(xiàng)，都是不會(huì)觸發(fā)view更新的。解決辦法react中可少用深結(jié)構(gòu)數(shù)據(jù)盡量淺，也可以采用深拷貝更新store。vue是框架中做了hack處理，可使用$apply解決，也可以用官方點(diǎn)名的八大數(shù)組自帶方法處理。

本文總結(jié)了JS數(shù)據(jù)類型及其聲明賦值更新時(shí)在內(nèi)存堆棧中的表現(xiàn)，可以更深入的理解這些數(shù)據(jù)類型。并在有更深理解之后來回顧開發(fā)中的常見問題，做出總結(jié)，歡迎補(bǔ)充。