国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【進階1-3期】JavaScript深入之內存空間詳細圖解

coordinate35 / 758人閱讀

摘要：進階期理解中的執行上下文和執行棧進階期深入之執行上下文棧和變量對象但是今天補充一個知識點某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。

（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）

本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第3天。

本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，點擊查看前端進階的破冰之旅

本期推薦文章

前端基礎進階（一）：內存空間詳細圖解 ，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。

推薦理由

今天介紹的是JS內存空間，了解內存空間中的堆和棧原理對于理解JS閉包、Event Loop等有很大幫助，本文使用圖解形式，即使是第一次接觸本文的讀者也很容易理解堆棧。文末提供了一個思考題，歡迎加群討論。

閱讀筆記

堆棧的內容和執行順序我就不說了，前面兩篇已經介紹過了。

【進階1-1期】理解JavaScript 中的執行上下文和執行棧

【進階1-2期】JavaScript深入之執行上下文棧和變量對象

但是今天補充一個知識點：某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。

對于下面的遞歸就會無限制的執行下去，直到超出調用堆棧的實際大小，這個是瀏覽器定義的。

function foo() {
    foo();
}
foo();

現在正式開始今天的主題，內存空間詳解

棧數據結構

棧的結構就是后進先出（LIFO），如果讀過前面兩篇文章應該是相當熟悉了。文中使用乒乓球盒子的結構來解釋。

處于盒子中最頂層的乒乓球5，它一定是最后被放進去，但可以最先被使用。而我們想要使用底層的乒乓球1，就必須將上面的4個乒乓球取出來，讓乒乓球1處于盒子頂層。

堆數據結構

堆數據結構是一種樹狀結構。它的存取數據的方式與書架和書非常相似。我們只需要知道書的名字就可以直接取出書了，并不需要把上面的書取出來。JSON格式的數據中，我們存儲的key-value可以是無序的，因為順序的不同并不影響我們的使用，我們只需要關心書的名字。

隊列

隊列是一種先進先出（FIFO）的數據結構，這是事件循環（Event Loop）的基礎結構，事件循環我們會在第8期詳解介紹。

變量的存放

首先我們應該知道內存中有棧和堆，那么變量應該存放在哪里呢，堆？棧？

1、基本類型 --> 保存在棧內存中，因為這些類型在內存中分別占有固定大小的空間，通過按值來訪問。基本類型一共有6種：Undefined、Null、Boolean、Number 、String和Symbol

2、引用類型 --> 保存在堆內存中，因為這種值的大小不固定，因此不能把它們保存到棧內存中，但內存地址大小的固定的，因此保存在堆內存中，在棧內存中存放的只是該對象的訪問地址。當查詢引用類型的變量時， 先從棧中讀取內存地址， 然后再通過地址找到堆中的值。對于這種，我們把它叫做按引用訪問。

在計算機的數據結構中，棧比堆的運算速度快，Object是一個復雜的結構且可以擴展：數組可擴充，對象可添加屬性，都可以增刪改查。將他們放在堆中是為了不影響棧的效率。而是通過引用的方式查找到堆中的實際對象再進行操作。所以查找引用類型值的時候先去棧查找再去堆查找。

幾個問題

問題1：

var a = 20;
var b = a;
b = 30;

// 這時a的值是多少？

問題2：

var a = { name: "前端開發" }
var b = a;
b.name = "進階";

// 這時a.name的值是多少

問題3：

var a = { name: "前端開發" }
var b = a;
a = null;

// 這時b的值是多少

現在來解答一下，三個問題的答案分別是20、‘進階’、{ name: "前端開發" }

對于問題1，a、b都是基本類型，它們的值是存儲在棧中的，a、b分別有各自獨立的棧空間，所以修改了b的值以后，a的值并不會發生變化。

對于問題2，a、b都是引用類型，棧內存中存放地址指向堆內存中的對象，引用類型的復制會為新的變量自動分配一個新的值保存在變量對象中，但只是引用類型的一個地址指針而已，實際指向的是同一個對象，所以修改b.name的值后，相應的a.name也就發生了改變。

對于問題3，首先要說明的是null是基本類型，a = null之后只是把a存儲在棧內存中地址改變成了基本類型null，并不會影響堆內存中的對象，所以b的值不受影響。

內存空間管理

JavaScript的內存生命周期是

1、分配你所需要的內存

2、使用分配到的內存（讀、寫）

3、不需要時將其釋放、歸還

JavaScript有自動垃圾收集機制，最常用的是通過標記清除的算法來找到哪些對象是不再繼續使用的，使用a = null其實僅僅只是做了一個釋放引用的操作，讓 a 原本對應的值失去引用，脫離執行環境，這個值會在下一次垃圾收集器執行操作時被找到并釋放。

在局部作用域中，當函數執行完畢，局部變量也就沒有存在的必要了，因此垃圾收集器很容易做出判斷并回收。但是全局變量什么時候需要自動釋放內存空間則很難判斷，因此在開發中，需要盡量避免使用全局變量。

思考題 
var a = {n: 1};
var b = a;
a.x = a = {n: 2};

a.x     // 這時 a.x 的值是多少
b.x     // 這時 b.x 的值是多少
參考 
前端基礎進階（一）：內存空間詳細圖解
解讀 JavaScript 之引擎、運行時和堆棧調用


JavaScript變量——棧內存or堆內存
往期文章查看

【進階1-1期】理解JavaScript 中的執行上下文和執行棧

【進階1-2期】JavaScript深入之執行上下文棧和變量對象

【進階1-3期】JavaScript深入之內存空間詳細圖解

【進階1-4期】JavaScript深入之帶你走進內存機制制

【進階1-5期】JavaScript深入之4類常見內存泄漏及如何避免

【進階2-1期】深入淺出圖解作用域鏈和閉包

每周計劃安排

每周面試重難點計劃如下，如有修改會通知大家。每周一期，為期半年，準備明年跳槽的小伙伴們可以把本公眾號置頂了。

【進階1期】 調用堆棧

【進階2期】 作用域閉包

【進階3期】 this全面解析

【進階4期】 深淺拷貝原理

【進階5期】 原型Prototype

【進階6期】 高階函數

【進階7期】 事件機制

【進階8期】 Event Loop原理

【進階9期】 Promise原理

【進階10期】Async/Await原理

【進階11期】防抖/節流原理

【進階12期】模塊化詳解

【進階13期】ES6重難點

【進階14期】計算機網絡概述

【進階15期】瀏覽器渲染原理

【進階16期】webpack配置

【進階17期】webpack原理

【進階18期】前端監控

【進階19期】跨域和安全

【進階20期】性能優化

【進階21期】VirtualDom原理

【進階22期】Diff算法

【進階23期】MVVM雙向綁定

【進階24期】Vuex原理

【進階25期】Redux原理

【進階26期】路由原理

【進階27期】VueRouter源碼解析

【進階28期】ReactRouter源碼解析

交流

本人Github鏈接如下，歡迎各位Star

http://github.com/yygmind/blog

我是木易楊，網易高級前端工程師，跟著我每周重點攻克一個前端面試重難點。接下來讓我帶你走進高級前端的世界，在進階的路上，共勉！

如果你想加群討論每期面試知識點，公眾號回復[加群]即可

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99556.html

相關文章

  • 【進階1-4期】JavaScript深入之帶你走進內存機制

    摘要：引擎對堆內存中的對象進行分代管理新生代存活周期較短的對象，如臨時變量字符串等。內存泄漏對于持續運行的服務進程，必須及時釋放不再用到的內存。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第4天。 本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃...

    不知名網友 評論0 收藏0

  • 【進階2-2期】JavaScript深入之從作用域鏈理解閉包

    摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。 本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

    simpleapples 評論0 收藏0

  • 【進階2-1期】深入淺出圖解作用域鏈和閉包

    摘要：本期推薦文章從作用域鏈談閉包，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。推薦理由這是一篇譯文，深入淺出圖解作用域鏈，一步步深入介紹閉包。作用域鏈的頂端是全局對象，在全局環境中定義的變量就會綁定到全局對象中。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周開始前端進階的第二期，本周的主題是作用域閉包，今天是第6天。 本...

    levius 評論0 收藏0

  • 【進階1-2期】JavaScript深入之執行上下文棧和變量對象

    摘要：本計劃一共期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，點擊查看前端進階的破冰之旅本期推薦文章深入之執行上下文棧和深入之變量對象，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第二天。 本計劃一共28期，每期...

    Richard_Gao 評論0 收藏0

  • 【進階1-5期】JavaScript深入之4類常見內存泄漏及如何避免

    摘要：本期推薦文章類內存泄漏及如何避免，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。四種常見的內存泄漏劃重點這是個考點意外的全局變量未定義的變量會在全局對象創建一個新變量，如下。因為老版本的是無法檢測節點與代碼之間的循環引用，會導致內存泄漏。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周正式開始前端進階的第一期，本周的主題...

    red_bricks 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<