資訊專欄INFORMATION COLUMN
摘要：所以相對于簡單數據類型而言，他們占用內存比較小，如果放在堆中，查找會浪費很多時間，而把堆中的數據放入棧中也會影響棧的效率。六總結本文總結了數據類型及其聲明賦值更新時在內存堆棧中的表現，可以更深入的理解這些數據類型。
JS數據類型 與 內存堆棧 一、前言
JS的數據類型已經是大家都很熟悉的東西了，但是大家是否對這些數據類型在內存中的分配了解，甚至在操作這些變量時，內存中是如何表現的，本文將對這些做一個總結。
二、JS數據類型ECMAScript 變量可能包含兩種不同數據類型的值:基本類型值和引用類型值。在將一個值賦給變量時，解析器必須確定這個值是基本類型值還是引用類型值。
基本類型值 指的是簡單的數據段，如: Undefined、Null、Boolean、Number 和 String。這 5 種基本數據類型是按值訪問的，因為可以操作保存在變量中的實際的值。
引用類型值指 那些可能由多個值構成的對象，并且引用類型的值是保存在內存中的對象，如: Object、Array、Function、Date對象等。與其他語言不同，JavaScript 不允許直接訪問內存中的位置， 也就是說不能直接操作對象的內存空間。在操作對象時，實際上是在操作對象的引用而不是實際的對象。 為此，引用類型的值是按引用訪問的。
三、如何理解按值訪問 按引用訪問要說明這個問題需要先來了解一下棧內存和堆內存。
基本類型值是存儲在棧中的簡單數據段，也就是說，他們的值直接存儲在變量訪問的位置。
堆是存放數據的基于散列算法的數據結構，在javascript中，引用值是存放在堆中的。
如以下代碼：
const a = 1;
const obj1 = {
name: "小明",
age: 18
}
const obj2 = obj1
在內存中的表現為：
在變量聲明時，基本類型變量會直接在棧內存中為它分配空間，變量值也是直接存儲在棧內存中；
而基本類型變量的真實值是存儲在堆內存中的，同時棧內存中會保存一個指針，這個指針指向真實值在對內存中的位置，也以理解為棧內存中存放了引用類型值存儲的地址。
所以訪問基本類型的變量時，是直接訪問到棧內存中其真正的值；而訪問引用類型的變量時，是通過棧內存中保存的引用地址去訪問。所以在上例中，重新聲明了一個obj2，并將obj1賦給obj2 其實是將obj1存放的引用賦給了obj2，此時obj1和obj2的指針指向了堆內存中的同一個對象，那么我們更改obj1的name屬性時obj2會變化，同樣更改obj2的name屬性時obj1也會變化。那么此時如果新聲明一個變量b = a會怎樣呢，因為是基本類型各不影響。
棧的優勢就是存取速度比堆要快，僅次于直接位于CPU中的寄存器，但缺點是，存在棧中的數據大小與生存期必須是確定的，缺乏靈活性。堆的優勢是可以動態地分配內存大小，生存期也不必事先告訴編譯器，垃圾收集器會自動地收走這些不再使用的數據，但是缺點是由于在運行時動態分配內存，所以存取速度較慢。
所以相對于簡單數據類型而言，他們占用內存比較小，如果放在堆中，查找會浪費很多時間，而把堆中的數據放入棧中也會影響棧的效率。比如對象和數組是可以無限拓展的，正好放在可以動態分配大小的堆中。
*注 ： 以下為c++中，對內存與棧內存的區別，很多地方相通，可輔助理解
主要的區別由以下幾點： 1、管理方式不同； 2、空間大小不同； 3、能否產生碎片不同； 4、生長方向不同； 5、分配方式不同； 6、分配效率不同； 管理方式：對于棧來講，是由編譯器自動管理，無需我們手工控制；對于堆來說，釋放工作由程序員控制，容易產生memory leak。（js有自己的垃圾回收機制，此條不適用） 空間大小：一般來講在32位系統下，堆內存可以達到4G的空間，從這個角度來看堆內存幾乎是沒有什么限制的。但是對于棧來講，一般都是有一定的空間大小的，例如，在VC6下面，默認的棧空間大小是1M（好像是，記不清楚了）。當然，我們可以修改。 碎片問題：對于堆來講，頻繁的new/delete勢必會造成內存空間的不連續，從而造成大量的碎片，使程序效率降低。對于棧來講，則不會存在這個問題，因為棧是先進后出的隊列，他們是如此的一一對應，以至于永遠都不可能有一個內存塊從棧中間彈出，在他彈出之前，在他上面的后進的棧內容已經被彈出，詳細的可以參考數據結構，這里我們就不再一一討論了。 生長方向：對于堆來講，生長方向是向上的，也就是向著內存地址增加的方向；對于棧來講，它的生長方向是向下的，是向著內存地址減小的方向增長。 分配方式：堆都是動態分配的，沒有靜態分配的堆。棧有2種分配方式：靜態分配和動態分配。靜態分配是編譯器完成的，比如局部變量的分配。動態分配由alloca函數進行分配，但是棧的動態分配和堆是不同的，他的動態分配是由編譯器進行釋放，無需我們手工實現。 分配效率：棧是機器系統提供的數據結構，計算機會在底層對棧提供支持：分配專門的寄存器存放棧的地址，壓棧出棧都有專門的指令執行，這就決定了棧的效率比較高。堆則是C/C++函數庫提供的，它的機制是很復雜的，例如為了分配一塊內存，庫函數會按照一定的算法（具體的算法可以參考數據結構/操作系統）在堆內存中搜索可用的足夠大小的空間，如果沒有足夠大小的空間（可能是由于內存碎片太多），就有可能調用系統功能去增加程序數據段的內存空間，這樣就有機會分到足夠大小的內存，然后進行返回。顯然，堆的效率比棧要低得多。 從這里我們可以看到，堆和棧相比，由于大量new/delete的使用，容易造成大量的內存碎片；由于沒有專門的系統支持，效率很低；由于可能引發用戶態和核心態的切換，內存的申請，代價變得更加昂貴。所以棧在程序中是應用最廣泛的，就算是函數的調用也利用棧去完成，函數調用過程中的參數，返回地址，EBP和局部變量都采用棧的方式存放。所以，我們推薦大家盡量用棧，而不是用堆。 雖然棧有如此眾多的好處，但是由于和堆相比不是那么靈活，有時候分配大量的內存空間，還是用堆好一些。五、其他變量操作在內存中的表現 及 開發中的注意點
如下例：
var lang = "Java"; lang = lang + "Script";
以上示例中的變量 lang 開始時包含字符串"Java"。而第二行代碼把 lang 的值重新定義為"Java" 與"Script"的組合，即"JavaScript"。實現這個操作的過程如下:首先創建一個能容納 10 個字符的 新字符串，然后在這個字符串中填充"Java"和"Script"，最后一步是銷毀原來的字符串"Java"和字 符串"Script"，因為這兩個字符串已經沒用了。這個過程是在后臺發生的，而這也是在某些舊版本的瀏覽器(例如版本低于 1.0 的 Firefox、IE6 等)中拼接字符串時速度很慢的原因所在。但這些瀏覽器后來的版本已經解決了這個低效率問題。
瀏覽器內核的底層優化尚不清楚，但是有人采用下面的方法進行優化，只看一下方法了解即可，因為瀏覽器內核優化之后效率已提高不必如此大費周章。提高效率的辦法是用數組的join函數：
如：
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("");
關于開發中需要注意的事項，主要是對于引用類型需要特別注意。
一、需要將原數據 存儲副本，并操作數據（如對請求回來的列表數據進行過濾顯示）。這是個很常見的問題，基本都遇到過這種情況，應該已經有處理經驗。主要就是如果直接將原數據data賦值給新變量a，那么自己操作a時data的數據也會受到影響。解決辦法就是避免簡單表面的進行存副本操作，應該存一個獨立的副本。如果數據源是數組結構就Array.prototype.slice.call(arr), 如果數據源是對象結構進行拷貝，至于深拷貝還是淺拷貝看自己的需要。個人感覺可以形成一種編碼習慣，類似場景要操作這樣的數據時先存一個獨立的副本（當然也要看需求是否需要，自行權衡）。
二、在MVVM框架中會經常出現 如model的某項數據是層數較深的復雜結構時，更改了數據項下的某個值時，view并不更新，因為view model覺得自己沒有變化，沒有通知view。比如react-redux中，action觸發的reducer更新了store下某項深結構數據下的某個值，又比如vue中簡單更改data中數組的某一項，都是不會觸發view更新的。解決辦法react中可少用深結構數據盡量淺，也可以采用深拷貝更新store。vue是框架中做了hack處理，可使用$apply解決，也可以用官方點名的八大數組自帶方法處理。
六、總結本文總結了JS數據類型及其聲明賦值更新時在內存堆棧中的表現，可以更深入的理解這些數據類型。并在有更深理解之后來回顧開發中的常見問題，做出總結，歡迎補充。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96464.html
摘要：它對數組和對象使用按值傳遞，但這是在的共享傳參或拷貝的引用中使用的按值傳參。例如在這里，變量和值在執行期間存儲在堆棧中。返回值這是可選的，函數可以返回值，也可以不返回值。變量被推入堆棧，從而在執行時成為的副本。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 22 篇。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 如果你錯過了前面的章節，可...
摘要：它對數組和對象使用按值傳遞，但這是在的共享傳參或拷貝的引用中使用的按值傳參。例如在這里，變量和值在執行期間存儲在堆棧中。返回值這是可選的，函數可以返回值，也可以不返回值。變量被推入堆棧，從而在執行時成為的副本。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 22 篇。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 如果你錯過了前面的章節，可...
摘要：調用堆棧是存放原始數據類型的地方除了函數調用之外。上一節中聲明變量后調用堆棧的粗略表示如下。解釋改變的正確方法是更改內存地址。在聲明時，將在調用堆棧上分配內存地址，該值是在堆上分配的內存地址。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 21 篇。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 如果你錯過了前面的章節，可以在這里找到它們：...
摘要：進階期理解中的執行上下文和執行棧進階期深入之執行上下文棧和變量對象但是今天補充一個知識點某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第3天。 本計劃一共28期，每期重點攻...
摘要：每個函數調用都將開辟出一小塊稱為堆棧幀的內存。當第二個函數開始執行，堆棧幀增加到個。當這個函數調用結束后，它的幀會從堆棧中退出。保持堆棧幀跟蹤函數調用的狀態，并將其分派給下一個遞歸調用迭。 原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者 關于譯者：這是一個流淌著滬江血液的純粹工程：認真，是 HTM...
閱讀 2636·2021-11-11 16:55
閱讀 1279·2021-09-22 15:25
閱讀 1793·2019-08-29 16:26
閱讀 925·2019-08-29 13:21
閱讀 2306·2019-08-23 16:19
閱讀 2795·2019-08-23 15:10
閱讀 761·2019-08-23 14:24
閱讀 1850·2019-08-23 13:48
