美文网首页代码计算机语言前端开发
前端基础进阶(一):内存空间详细图解

前端基础进阶(一):内存空间详细图解

作者: 这波能反杀 | 来源:发表于2017-02-09 16:19 被阅读39831次

    由于某些原因,文章已经删除,打算迁移到别处,目前正在寻找更合适的平台。

    请大家关注我的新公众号ar_indus,随后我会在公众号里推送新的博客地址。

    后续计划的《react进阶系列》文章也会在新公众号中推送。

    公众号二维码

    ar_indus

    相关文章

      网友评论

      • da5fe98a930d:我看过其他的文章,说js的原始值类型(undefined null number等),这种的都是存在栈里的,而您的文章里却说js里不太区分堆栈,所以可以理解为他们都存在堆里。所以,我想问js的原始值到底放在哪里?
        这波能反杀:Js里没有栈
      • 7661739843c6:本来很抽象、模糊的概念,看了这篇文章后理解起来真的变得水到渠成的事了,太赞了
      • 路家小白:请问,这个画图软件是什么?
      • 7640e6a03523:非常不错,又学到了新东西。
      • quentin2012:很有收获,通俗易懂,希望多出精品。
      • d79c69005e79:楼主你怎么可以写出这么好的文章:relieved::relieved::relieved:
      • 56cfe8238185:很厉害:+1: :yum: 推荐给朋友了
      • 8597c3617dad:变量对象中“变量名”用“具体值”时,也是“引用”这种方法么?如果是,那地址指针时什么?
      • 8597c3617dad:变量对象是一个特殊的堆内存空间,变量对象调用具体值也是“引用”的方法么?而不是直接使用,如果是“引用”的方法,同一个堆内存空间还需要地址指针吗?如果不是,上文说“此a = null其实仅仅只是做了一个释放引用的操作,让 a 原本对应的值失去引用”岂不是冲突了
      • 8ae8b74b92ba:访问变量时有按值访问和按引用访问。
        而“这里的引用,我们可以理解为保存在变量对象中的一个地址,该地址与堆内存的实际值相关联。”
        我想咨询下,js中所有函数传参时都是按值传递,那么当实参是object类型时,传递的不是地址吗
      • 6c172a63b04a:那么现在的问题是,基本数据类型到底是存放在一个处于堆中的对象中,还是保存在栈内存中,使用时弹出该数据以上的所有数据,获取后再将其他的压回去?
        cfb3d1a8de8e:存放在一个处于堆中的对象中
      • 181ebcbf1475:楼主写得很好,解决了我很多的问题.
      • Tufeng:超级感谢。在所有人告诉我根本不需要理解内存作用的时候,我还是钻牛角尖一直在搜文章看,直到看到作者这篇,虽然没有面面俱到,但我真的受益匪浅:pray:
      • Tufeng:点之前520,点之后521,七夕有缘
        这波能反杀:@Tufeng 文艺:+1:
      • d2a590d0e550:有点疑问,望翻牌
        var a = [],b
        for(;;) a.push(null) // 溢出崩溃
        for(;;) a.push(undefined) // 不崩溃
        for(;;) a.push(b) // 溢出崩溃

        1.我们在声明变量的时候就分配入栈了吗?
        2.undefined,null在分配入栈有什么区别。



        这波能反杀:@懒人兔兔 不知道
        d2a590d0e550:@这波能反杀 感谢翻牌,在高程中说undefined的是null的派生值,我想它们在内存中应该是有区别的。为object高程中的解释是因为历史缘故在function或者Object查找对应的值会为null所以才把它的返回类型为object。不知道这个理解对不对,我的疑惑点在于声明变量的undefined值和undefined、null有什么区别,为什么会导致浏览器的崩溃
        这波能反杀:@懒人兔兔 typeof null == 'object'
      • a105fa17ba67:改名字了啊,我还以为找不到了呢,这么好的文章就算找两个小时也要找到
      • b62f7627a29d:2017.8.14
      • b2a382334db8:擦,改名了,差点找不到:joy:
      • 诺顿遗迹:老师,问一下,对于对象中的属性的值,是保存在堆中还是栈中?
        诺顿遗迹:@桐山一 嗯,按照波老师的说法,所有的数据都是存在堆中的。
        夏目祐太:@诺顿遗迹 堆内存中。
      • 373cf7dd2390:javascript中并没有明确的堆与栈的说法
      • 嘿啦啦童话:你好,请问下,数组大小可以动态改变,那他分配的内存空间是连续的吗,没有设置的值undefined,也是会分配空间的吗?比如var arr =〔〕;arr.length=100;中间的99个空间也会分配吗?谢谢
      • 8509e82aea19:希望有一天也能成为你这样乐于分享的人
        8509e82aea19:@波同学 嗯嗯,好的,谢谢您
        这波能反杀:@杯_茶 学一点写一点心得,现在就可以呀
      • 8509e82aea19:楼主好人啊,万分感谢
      • 邢烽朔:好!
        很好!
        棒棒哒!
      • 元气满满321:写的真棒,想问问您用的是ProcessOn的哪种类型图呢?
      • e7ff6408daf8:虽然不知道是不是我没理解作者的意思
        但是堆和栈确实是两种东西 我从没听说过栈可以叫做堆栈的
        这个地方作者是不是再考虑考虑
      • 小弟lcxdi8887:问题:null也是基础类型,如果赋值给null不是依然在变量对象中占用空间吗?
      • 我在睡觉:堆栈让很多人产生了误解,JavaScript这种高级语言不应该从堆栈角度讲解。
      • 罗彬727:谢谢,楼主的好文,
      • 4c13859d1316:很好的教程,支持!
      • 0aca5069d154:老师,我把您的全部文章都看了至少两边,我以为我可以出师了,然而,今天一个问题,让我觉得,我too young,too naive
        问题如下:
        A:
        var a = {name:'tom'}
        a == null;
        正常运行
        B:
        {name:'tome'} == null
        报语法错误

        我有几个疑问:
        1.{name:'tom'}如果没有变量来接收它,那它以什么形式存在内存中?
        2.我原先猜测引用类型数据要变量接收才能比较,但是[1,2,3] == null妥妥打脸
        3.另一个猜测是{name:'tom'}被当成了代码段来执行
        4.B这行代码内部究竟执行了什么才会报错?
        4.为什么会出现A.B不同的结局?
        诗和元芳:猜测是3,因为你加了一个括号就不会报错了。
        0aca5069d154:@zweekend 这个我理解,可是为什么"[1,2,3] == null"这个就能执行判断,{name:'tome'} == null就报错,但是null == {name:'tom'}也是执行判断
        64992ad017f4: @想成为妖王的猴子 好像程序中定义任何类型的数据值都需要声明一个变量来存储他,基本类型值就存储在变量本地,而引用类型值存储在堆内存,把地址存储在变量本地,
      • de96d6727049:对比一下c和java中对按引用传递的定义,js对象根本算不上按引用传递,通俗的说最显著的点是引用和原并不强绑定。
      • 447b87487fb6:这一系列文章比较不错
      • da4cea0771d6:demo02.js 复制后的图 为啥a:10?不是已经改过了么
        da4cea0771d6:@波同学 啊。是想多了。。是复制后,我一下想到了重新赋值后
        这波能反杀:@freepoter 。。。你可能想多了
      • c1c38f6f74eb:变量对象中,基础数据类型是按值存储的,引用类型是按引用存储的,是这样理解吗?
        c1c38f6f74eb:@波同学 太抽象了....,还得再消化下
        这波能反杀:@lIrUIl0nG 没有什么按值安引用存储的说法
      • 吉古力:我还是很纳闷,对象变量是存储在堆内存吗?
        这波能反杀:@奋斗的小舟 嗯
      • 年轻小子:博主,事件,例如点击事件中用引用的全局变量是不是也不会被垃圾回收机制回收掉????
        这波能反杀:@年轻小子 不会,点击事件要执行的函数都存在了一个队列中等待触发执行
      • chenpipy:js内存分析,通俗易懂。
      • 232c8a42e903:用了一年左右的js了,现在回头看看,自己不懂得地方还是太多了,只停留在会用,但是不懂原理,今天看了你的讲解,有种耳目一新的感觉
      • ca86ff0ba515:简单明了,通俗易懂:+1: :+1:
      • c16175dc93ad:```
        var a = 20; // 在内存中给数值变量分配空间
        alert(a + 100); // 使用内存
        a = null; // 使用完毕之后,释放内存空间

        //这块用a=undefined释放是不是更好点
        ```
        64992ad017f4: @波同学 存储基本类型值的变量,如果是函数的局部变量,会随函数的退出,而自动在内存中释放,如果是全局变量,是不是就必须得等到页面退出才能释放,所以,用null来主动释放内存,是不是只能适用于存储引用类型的变量,让变量与对象之间的联系断掉,因为null是一个空对象,所以当a=null后,是不是a中存储的是一个空对象的地址?
        这波能反杀:undefined是一个值。nul是空对象。我感觉还是null更准确一点
      • 向布谷鸟说早安:为什么释放内存是要var一下,不能直接a=null么。
        这波能反杀:@向布谷鸟说早安 噢,我写错了,感谢:joy:
      • e3097d76ee9d:好棒,写的真的很容易懂~
        这波能反杀:@文豪要加油 :smile:
      • 张荔枝:写得不错
      • binstar:写的很好啊
        这波能反杀:@三年七天 那点个赞呗
        binstar: @三年七天 啊
        binstar: @三年七天 嗯
      • liuxuan:[上例图解]那幅图,先定义的变量应该在下边,顺序应该是搞反了。
        这波能反杀:@liuxuan 因为变量对象严格说来仍在堆内存中,所以他的访问也是可以无序的
      • a7ce7f9e12ad:道理我都懂,但是,,乒乓球盒子不是双端队列吗😀
        这波能反杀:@天蓝云扬 :sweat_smile:下面堵住
      • 07d09d5b6dca:"引用类型的复制同样也会为新的变量自动分配一个新的值保存在栈内存中" ? 请问这里是栈内存还是堆内存?
        07d09d5b6dca:@波同学 多谢分享~ 希望能早日看到大神新的文章~~ ^ ^
        这波能反杀:@月半羊 sorry,我写错了,应该是保存在变量对象中,感谢,已修改
      • kerush:确切的说,我就是搜JavaScript的时候,才在这里看到博主的文章
      • Weldon_:通俗易懂,深入浅出,谢谢楼书的好文,但是想问一下栈内存主要用来存储什么数据的。
        这波能反杀:js中的栈,主要是用来处理执行上下文的执行的,通俗说就是处理函数的调用,(二)中有详细说哦
      • 2da622fdc40f:hi,画图用的什么工具呀?
        这波能反杀:@ZCHAR ProcessOn
      • c3be5117160b:解释的很好
        c3be5117160b: @波同学 😍😍来啊 造作啊
        这波能反杀:@fenfen_angle 读者老爷能看懂就好
      • librAquarius:有帮助!
      • 无戒:你这么火。真是好棒。
        这波能反杀:@无戒 :smile:谢谢老师
      • f0c7c415e315:我看网上的文章都是说js基础类型都是存放在栈中,作者修改后就没有栈的概念了。变成了变量对象。孰对孰错?
        f01a8555aa1a:《javascript高级程序》4.1 有提到这个 “”引用类型的值是保存在内存中的对象“”
        这波能反杀:@JobTest 国内很多博文也错了
        这波能反杀:@JobTest 我之前理解错了
      • e80058bfeb71:栈,也叫堆栈?能别误导初学者吗?stack和heap是一个东西?
        e80058bfeb71:@Dcfm 拜托找本数据结构的书看看。
        e6c9ec732983:正经的译名就是堆栈,也可以称为栈。维基百科搜索栈即可。
        这波能反杀:@iLRainyday 单独叫堆的时候才是heap哈
      • feng003:确实浅显易懂,能简单明白。问个弱弱的问题:堆和栈 是属于数据结构方面的概念,不同的语言 数据类型是按堆还是按栈的方式存储不同吗?
        这波能反杀:JavaScript属于高级语言,高级语言中严格意义上来说并没有堆栈的区分。但是一些特殊场景会在逻辑上实现栈的存取方式,这才有了堆与栈的不同。因此不同语言的存储方式有类似的地方但肯定也有所不同。这要看语言具体实现
        e2349e4758f5:好像基本没有不同;引用数据类型就是存放在堆中,基本数据类型存在在栈中
      • 开发者头条_程序员必装的App:感谢分享!已推荐到《开发者头条》:https://toutiao.io/posts/xi7hsz 欢迎点赞支持!
        欢迎订阅《前端文章收藏夹》https://toutiao.io/subjects/74981
      • 勿忘巛心安:赞,清楚明了,简单易懂
      • ltaoo:有一些小小的疑问,下面代码

        var a1 = 0; // 栈
        var a2 = 'this is string'; // 栈
        var a3 = null; // 栈

        var b = { m: 20 }; // 变量b存在于栈中,{m: 20} 作为对象存在于堆内存中
        var c = [1, 2, 3]; // 变量c存在于栈中,[1, 2, 3] 作为对象存在于堆内存中

        a1、a2、a3、b、c 都是存储在栈内存中,遵循先进后出,那 a1 作为先进的,我需要用到这个值的时候,内存经历了什么处理呢?会将 a2、a3、b、c 都弹出吗?如果弹出了都到哪里去了呢?
        这波能反杀:谢谢你的问题,我后来又去阅读了很多国外的资料,发现我之前的理解是错的,真是不好意思。 - -!

        js中的基础类型变量,都是存放在变量对象中,并不是存放在栈内存中。:joy:

        因此你的问题就很容易解决了。由于我自己理解错了,导致文章很多地方都错了,所以建议重新阅读一下,这次应该没错了,参考了很多资料:sob: ,真是对不起大家啊.... ..
        ltaoo:@JobTest 谢谢,大概了解了:smile:
        f0c7c415e315:你要用a1,a2 a3 b c都会重新排序,a1到了最后而已
      • 微尘1:波同学开始新一轮了,加油
        这波能反杀:@微尘1 :blush:谢谢
      • f0c7c415e315:写的比较浅,但是很容易理解。
      • 8fb8e145ac0d:赞,清楚明了,简单易懂。

      本文标题:前端基础进阶(一):内存空间详细图解

      本文链接:https://www.haomeiwen.com/subject/wfakittx.html