12 | 栈空间和堆空间：数据是如何存储的？
该思维导图由 AI 生成，仅供参考
让人疑惑的代码
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
JavaScript内存机制对于前端开发者来说是一个重要而不常被提及的概念。本文从JavaScript中的数据存储入手，介绍了JavaScript是一种弱类型、动态语言，以及JavaScript的数据类型和内存空间的概念。文章通过对比静态语言和动态语言的特点，以及JavaScript的数据类型和内存空间的关系，帮助读者理解了JavaScript中数据是如何存储的。文章通过实际代码示例和图示，生动地解释了栈空间和堆空间的作用，为读者提供了深入了解JavaScript内存机制的基础。文章内容通俗易懂，适合初学者快速了解JavaScript内存机制的基本概念。 文章还深入探讨了闭包的内存模型，解释了闭包产生的过程，以及闭包中变量的存储方式。通过分析闭包的内存模型，读者可以更好地理解JavaScript中的内存管理机制。此外，文章还提出了一个思考问题，即如何实现完整地拷贝一个对象，使得拷贝后的对象与原对象互不影响。这个问题引发了读者对于对象拷贝的思考和讨论。 总之，本文通过深入浅出的方式，全面介绍了JavaScript内存机制的相关概念和原理，对于想要深入了解JavaScript内存管理的读者来说，是一篇非常有价值的文章。
《浏览器工作原理与实践》，新⼈⾸单¥59
全部留言(122)
- 最新
- 精选
仰5卧0起坐1、从内存模型角度分析执行代码的执行流程第二步看，在堆空间创建closure(foo)对象，它是存储在foo函数的执行上下文中的。 那么closure(foo)创建开始时是空对象，执行第三步的时候，才会逐渐把变量添加到其中。 2、当foo函数执行结束后，foo的执行上下文是不是销毁了？如果销毁了，产生一下两个疑问： a、如果foo函数执行上下文销毁了，closure(foo)并没有销毁，那foo函数执行上下文是怎么销毁的呢？就比如销毁一个盒子，盒子毁里，里面的东西应该也是毁掉的 b、既然closure(foo)既然没有销毁，那它存储在堆中的什么地方呢？必定它所依赖的foo执行上下文已经不存在了作者回复: 关于foo函数执行上下文销毁过程：foo函数执行结束之后，当前执行状态的指针下移到栈中的全局执行上下文的位置，foo函数的执行上下文的那块数据就挪出来，这也就是foo函数执行上下文的销毁过程，这个文中有提到，你可以参考“调用栈中切换执行上下文状态“图。 第二个问题：innerBar返回后，含有setName和getName对象，这两个对象里面包含了堆中的closure(foo)的引用。虽然foo执行上下文销毁了，foo函数中的对closure(foo)的引用也断开了，但是setName和getName里面又重新建立起来了对closure(foo)引用。 你可以： 1:打开“开发者工具” 2:在控制台执行上述代码 3:然后选择“Memory”标签，点击"take snapshot" 获取V8的堆内存快照。 4:然后“command+f"(mac) 或者 "ctrl+f"(win),搜索“setName”，然后你就会发现setName对象下面包含了 raw_outer_scope_info_or_feedback_metadata，对闭包的引用数据就在这里面。
2019-08-3112167
尝试者说这门课程是我看过最好的课程，真的时候做到了深入浅出、行云流水、水银泻地般的境界。老师你多多开开前端的其他课程啊，保证很多人愿意来听课的。作者回复: 多谢哈，在准备V8的课程了
2019-12-14344
Marvinfunction copy(dest){ if(typeof dest === 'object'){ if(!dest) return dest; // null var obj = dest.constructor(); // Object/Array for(var key in dest){ obj[key] = copy(dest[key]) } return obj; } else { return dest; } }作者回复: 挺好 继续
2019-08-311041
XWL老师，我有几个疑问： 1、Function 函数类型也是继承于Object，声明函数后是不是也是存在堆空间中的，那么浏览器编译函数时是不是会同时创建执行上下文和向堆空间中压入一个值 2、function a(){ var b = 1; var c = { d: 2 }; } 当 a 的执行上下文销毁后，c 对象在堆空间中的引用会跟着销毁么，将 c 返回出去或不返回，会不会是不一样的情况作者回复: 函数就是一种特别的对象，所以会保存在堆上，编译函数时，这个函数的已经存在于堆中了！ 第二个问题返回了c对象的话，那么说明全局环境对c对象有引用，既然有引用那么就不会被垃圾回收器标记出来，所以c对象也就不会回收！
2019-09-1812
浪里行舟老师，专栏的配图怎么画出来的作者回复: macos的keynote
2019-09-1946
Tim原文："弱类型 : 意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型，JavaScript 引擎在运行代码的时候自己会计算出来。动态 : 意味着你可以使用同一个变量保存不同类型的数据。" 与上文对「弱类型」、「动态」的解释正好相反了，在上文解释中提到了，一个布尔类型的变量可以被一个字符串类型变量赋值，会进行「隐式转换」，这叫做「弱类型语言」。而动态语言老师的解释是不需要定义变量是什么数据类型。 所以老师文中对这两种概念的「总结」（也就是我评论引用的原文）弄反了，不知道理解的对不对。作者回复: 看来我有必要重新解释一下静态类型和动态类型，强类型和弱类型的区别了！ 要理解一门语言是静态类型还是动态类型，最本质的判断方法是看在什么时间段对类型就行检测，静态类型的语言会在编译阶段就行检测，动态类型的语言会在运行时做类型检测！ 比如C/C++是静态语言，会在编译阶段对类型就行检测，如果检测到不合法的语言，编译阶段就会报错！ 而JavaScript就是动态语言，编译阶段不会做太多类型检测，而是等到运行时再检测变量的具体类型，这是动态语言性能低于静态语言的一个关键的地方。V8对这种动态性做了大量的优化！ 要理解一门语言是弱类型还是强类型，看变量在运行时，是否能够改变类型，比如C/c++/javaScript,都可以在运行时将一种类型的变量，改成另外一种类型的，所以他们是弱类型，而JAVA就不能运行过程中修改变量类型，所以是静态语言！ 你再结合这两点看文中的内容！
2020-01-1522
大树老师能分析一下 箭头函数的内存模型吗 因为你在文章里提到过 箭头函数不创建执行上下文作者回复: 这块我会在下个v8专栏来深度分析
2019-12-051
趁你还年轻233“JavaScript 中的数据类型一共有 8 种。” TypedArray，Blob，FIle，Promise这些呢？作者回复: 这些都属于object类型
2019-11-111
子曰let jack = { name: "jack.ma", age: 40, like: { dog: { color: 'black', age: 3, }, cat: { color: 'white', age: 2 } } } function copy(src) { let dest = JSON.parse(JSON.stringify(src)); // 实现拷贝代码，将 src 的值完整地拷贝给 dest // 在这里实现 return dest } let jack2 = copy(jack) // 比如修改 jack2 中的内容，不会影响到 jack 中的值 jack2.like.dog.color = "green" console.log(jack.like.dog.color) // 打印出来的应该是 "black"作者回复: 直接转换json 再转换回来 这个没问题
2019-09-021
墨灵老师对弱类型语言的解释不够精确。 ``` a = 1 a = 1.1 a = '' a = [] a = {} ``` 这段代码在js和python都是可以执行的，但python并不是一门弱类型的语言。 ``` 1 + '1' ``` 这代码在js执行结果是'11'，但在python执行却是报错的，因为python不理解一个整数和字符串相加的逻辑... 在js中，任何两个类型都是可以相加的，但是结果却不是一定是我们想要的。作者回复: 你是高手，V8专栏中的一篇介绍类型系统的思路和你这个类似
2020-03-22