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

資訊專欄INFORMATION COLUMN

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

coordinate35 / 764人閱讀

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

（關(guān)注福利，關(guān)注本公眾號回復[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導）

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

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

本期推薦文章

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

推薦理由

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

閱讀筆記

堆棧的內(nèi)容和執(zhí)行順序我就不說了，前面兩篇已經(jīng)介紹過了。

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

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

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

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

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

現(xiàn)在正式開始今天的主題，內(nèi)存空間詳解

棧數(shù)據(jù)結(jié)構(gòu)

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

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

堆數(shù)據(jù)結(jié)構(gòu)

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

隊列

隊列是一種先進先出（FIFO）的數(shù)據(jù)結(jié)構(gòu)，這是事件循環(huán)（Event Loop）的基礎(chǔ)結(jié)構(gòu)，事件循環(huán)我們會在第8期詳解介紹。

變量的存放

首先我們應(yīng)該知道內(nèi)存中有棧和堆，那么變量應(yīng)該存放在哪里呢，堆？棧？

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

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

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

幾個問題

問題1：

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

// 這時a的值是多少？

問題2：

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

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

問題3：

var a = { name: "前端開發(fā)" }
var b = a;
a = null;

// 這時b的值是多少

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

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

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

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

內(nèi)存空間管理

JavaScript的內(nèi)存生命周期是

1、分配你所需要的內(nèi)存

2、使用分配到的內(nèi)存（讀、寫）

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

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

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

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

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


JavaScript變量——棧內(nèi)存or堆內(nèi)存
往期文章查看

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

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

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

【進階1-4期】JavaScript深入之帶你走進內(nèi)存機制制

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

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

每周計劃安排

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

【進階1期】 調(diào)用堆棧

【進階2期】 作用域閉包

【進階3期】 this全面解析

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

【進階5期】 原型Prototype

【進階6期】 高階函數(shù)

【進階7期】 事件機制

【進階8期】 Event Loop原理

【進階9期】 Promise原理

【進階10期】Async/Await原理

【進階11期】防抖/節(jié)流原理

【進階12期】模塊化詳解

【進階13期】ES6重難點

【進階14期】計算機網(wǎng)絡(luò)概述

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

【進階16期】webpack配置

【進階17期】webpack原理

【進階18期】前端監(jiān)控

【進階19期】跨域和安全

【進階20期】性能優(yōu)化

【進階21期】VirtualDom原理

【進階22期】Diff算法

【進階23期】MVVM雙向綁定

【進階24期】Vuex原理

【進階25期】Redux原理

【進階26期】路由原理

【進階27期】VueRouter源碼解析

【進階28期】ReactRouter源碼解析

交流

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

http://github.com/yygmind/blog

我是木易楊，網(wǎng)易高級前端工程師，跟著我每周重點攻克一個前端面試重難點。接下來讓我?guī)阕哌M高級前端的世界，在進階的路上，共勉！

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99556.html

相關(guān)文章

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

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

    不知名網(wǎng)友 評論0 收藏0

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

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

    simpleapples 評論0 收藏0

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

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

    levius 評論0 收藏0

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

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

    Richard_Gao 評論0 收藏0

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

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

    red_bricks 評論0 收藏0

發(fā)表評論

0條評論

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