js基礎梳理-內存空間

時間 2019-11-17

原文原文鏈接

我估計有不少像我這樣非計算機專業的人進入到前端以後，老是在寫業務代碼，思考什麼什麼效果如何實現，致使不少基礎概念型的東西都理解得並不太清楚。常常一碰到羣裏討論的些筆試題什麼的，總以爲本身像是一個假前端似的，似懂非懂，就算會作也不能清楚的表述爲何會是那樣的結果。老是本身安慰本身，反正正常項目不多這麼寫代碼。不知道也不要緊，可是時間久了，發現不深入系統的理解這些東西，工做中常常碰到一些莫名其妙的坑，或者有時候以爲看別人插件的代碼，別人到底是如何一步步實現的？前端

慢慢的就有了愈來愈強的想法把這些基礎知識系統的梳理一遍，再也不老是那麼碎片化的學習，要善於積累沉澱，多擴散思考，觸類旁通，構建點線面知識網絡。jquery

回到本文主題，js內存空間算法

1.首先思考這幾道題

數據類型分別存在哪裏？
堆和棧的區別？
var a = {b: 1} 存放在哪裏？
var a = {b: {c: 1}}存放在哪裏？
var a = {name: "前端開發"}; var b = a; a = null, 那麼b輸出什麼？
垃圾回收時棧和堆的區別？
爲何會有內存泄漏？如何解決？

想弄清以上問題，須要對內存空間有一個清晰的認知。
在瞭解內存空間以前，須要先熟悉下三種數據結構。他們分別是棧（stack），堆（heap）和隊列（queue）。數組

2.棧數據結構

要簡單理解棧的存取方式，能夠經過類比乒乓球盒子來分析。瀏覽器

這種乒乓球的存放方式與棧中存取數據的方式一模一樣。處於盒子中最頂層的乒乓球5，它必定是最後被放進去，但能夠最早被使用。而若是想要使用底層的乒乓球1，就必須將上面的4個乒乓球取出來，讓乒乓球1處於盒子頂層。這就是 ==棧空間後入先出（LIFO, last-in-first-out）== 的特色。網絡

3. 堆數據結構

堆數據結構是一種樹狀結構。它的存取數據的方式，則與書架與書很是相似。數據結構

書雖然也整齊的存放在書架上，可是隻須要只知道書的名字，就能夠很方便的取出想要的書，而不用像從乒乓球盒子裏取乒乓球同樣，非得將上面的全部乒乓球拿出來才能取到中間的某一個乒乓球。比如在JSON格式的數據中，存儲的 key-value 能夠是無序的，由於順序的不一樣並不影響使用，只須要關心書的名字。閉包

4.隊列

隊列是一種先進先出（FIFO）的數據結構。正如排隊過安檢同樣，排在隊伍前面的人必定是最早過檢的人。用如下的圖示能夠清楚的理解隊列的原理。函數

5.內存空間與js變量

js變量能夠用來保存兩種類型的值：基本類型值和引用類型值。在ES6以前共有6種數據類型：Undefined、Null、Boolean、Number，String和Object，其中前5種是基本類型值。oop

基本類型值在內存中佔據固定大小的空間，所以被保存在棧內存中。
從一個變量向另外一個變量複製基本類型的值，會建立這個值的一個副本。
引用類型的值是對象，保存在堆內存中。
包含引用類型值的變量實際上包含的並非對象自己，而是一個指向該對象的指針
理解隊列數據結構的目的主要是爲了清晰的明白事件循環（Event Loop）的機制究竟是怎麼回事。隊列在本篇文章中並非很關聯，只是爲了與棧的後入先出造成對比方便聯想記憶。

擴散性思考構建點線面知識網絡：

ES6新增的Symbol類型是否也被保存在棧內存中？
js訪問變量有按值和按引用兩種方式，傳遞參數只能按值傳遞是爲何？
深淺拷貝與理解基本數據類型和引用數據類型有什麼聯繫？
都知道基礎類型區分用typeof, 那如何區分Object究竟是Array,Function,Date仍是RegExp等等更細分的類型，jquery中的$.type方法又是如何實現的？
如何判斷一個對象是不是純粹的對象（經過{}或new Object建立的對象，主要爲了與其餘的js對象區分，例如數組，宿主對象等）？jquery中的$.isPlainObject方法又是如何實現的？
如何判斷一個對象是不是空對象？jquery中的$.isEmptyObject 又是如何實現的？

6.內存空間與垃圾回收機制

js具備自動垃圾收集機制，即執行環境會負責管理代碼執行過程當中使用的內存。原理就是找出那些再也不繼續使用的變量，而後釋放其佔用的內存。如今基本全部（谷歌，火狐，IE9+）瀏覽器的垃圾收集方式都是採用的標記清除（mark-and-sweep）算法，這種算法的思想是給當前不使用的值加上標記，而後再回收其內存。

js的內存聲明週期：