12 堆栈空间数据是如何存储的

95 阅读6分钟

静态语言、动态语言

使用之前就需要确认其变量数据类型的称为静态语言量数据类型的称为静态语言。

我们把在运行过程中需要检查数据类型的语言称为动态语言

强类型,弱类型

支持隐式类型转换的语言称为弱类型语言。

不支持隐式类型转换的语言称为强类型语言。

通俗的说 动静的区分在类型是否要运行前确认、强弱的区分在运行的时候才能知道存储结构。

截屏2023-05-10 下午4.09.06.png

这就不难解释为啥js在鄙视链的底端了。

JavaScript是一种弱类型的、动态的语言

弱类型,意味着你不需要告诉JavaScript引擎这个或那个变量是什么数据类型,JavaScript引擎在运行代
码的时候自己会计算出来包括空间都是运行时候算出来的。【存储层面上】

动态,意味着你可以使用同一个变量保存不同类型的数据。【类型层面上】


var bar  
bar = 12  
bar = "极客时间"  
bar = true  
bar = null  
bar = {name:"极客时间"}

// 只有在运行的时候才能确定类型+存储空间所以需要获取类型需要typeof

截屏2023-05-10 下午4.14.54.png

第一点,使用typeof检测Null类型时,返回的是Object。这是当初JavaScript语言的一个Bug,一直保留至
今,之所以一直没修改过来,主要是为了兼容老的代码。

第二点,Object类型比较特殊,它是由上述7种类型组成的一个包含了key-value对的数据类型

第三点,前七个是基本数据类型 后面那个是引用数据类型。

内存空间

要理解JavaScript在运行过程中数据是如何存储的,你就得先搞清楚其存储空间的种类。下面是我画的
JavaScript的内存模型,你可以参考下:

截屏2023-05-10 下午4.20.03.png

JS在执行的过程当中内存分为三种类型 分别是代码空间、栈空间代码空间、栈空间和堆空间空间

代码空间主要是存储可以执行的代码的空间。

栈空间和堆空间

这里的栈空间就是我们之前反复提及的调用栈,是用来存储执行上下文的。为了搞清楚栈空间是如何存储数据的,我们还是先看下面这段代码:

function foo(){  
    var a = "a"  
    var b = a  
    var c = {name:"b"}  
    var d = c  
}  
foo()

调用栈的模型图

foo栈 变量环境 词法环境 可执行代码

变量环境 编译的时候

d = undefined
c = undefined
b = undefined
a = undefined

变量环境执行的时候

d = 0x111
c = 0x111 // 在堆里面的一个对象地址
b = "a"
a = "a"

全局栈

好了,现在你应该知道了原始类型的数据值都是直接保存在“栈”中的,引用类型的值是存放在“堆”中原始类型的数据值都是直接保存在“栈”中的,引用类型的值是存放在“堆”中的。不过你也许会好奇,为什么一定要分“堆”和“栈”两个存储空间呢?所有数据直接存放在“栈”中不就可以了吗?

答案是不可以的。这是因为JavaScript引擎需要用栈来维护程序执行期间上下文的状态,如果栈空间大了话,所有的数据都存放在栈空间里面,那么会影响到上下文切换的效率,进而又影响到整个程序的执行效率。比如文中的foo函数执行结束了,JavaScript引擎需要离开当前的执行上下文,只需要将指针下移到上个执行上下文的地址就可以了,foo函数执行上下文栈区空间全部回收,具体过程你可以参考下图:

截屏2023-05-10 下午4.31.33.png

切换上下文有效率问题。

原始类型的赋值会完整复制变量值,而引用类型的赋值是复制引用地址值是复制引用地址。

再谈闭包

现在你知道了作用域内的原始类型数据会被存储到栈空间,引用类型会被存储到堆空间,基于这两点的认知,我们再深入一步,探讨下闭包的内存模型。


foo() {  
    var myName = "x"  
    let test1 = 1  
    const test2 = 2  
    var innerBar = {  
        setName:function(newName){  
        myName = newName  
    },  
    getName:function(){  
        console.log(test1)  
        return myName
    }  
  }  
  return innerBar  
}  
var bar = foo()  
bar.setName("x")  
bar.getName()  
console.log(bar.getName())

当执行这段代码的时候,你应该有过这样的分析:由于变量myName、test1、test2都是原始类型数据,所以在执行foo函数的时候,它们会被压入到调用栈中;当foo函数执行结束之后,调用栈中foo函数的执行上下文会被销毁,其内部变量myName、test1、test2也应该一同被销毁。

myName和test1并没有被销毁,而是保存在内存中,那么应该如何解释这个现象呢?

内存模型的⻆度来分析 1. 当JavaScript引擎执行到foo函数时,首先会编译,并创建一个空执行上下文。 2. 在编译过程中,遇到内部函数setName,JavaScript引擎还要对内部函数做一次快速的词法扫描,发现该内部函数引用了foo函数中的myName变量,由于是内部函数引用了外部函数的变量,所以JavaScript引擎判断这是一个闭包,于是在堆空间创建换一个“closure(foo)”的对象(这是一个内部对象,JavaScript是无法访问的),用来保存myName变量。 3.接着继续扫描到getName方法时,发现该函数内部还引用变量test1,于是JavaScript引擎又将test1添加到“closure(foo)”对象中。这时候堆中的“closure(foo)”对象中就包含了myName和test1两个变量
了。 4. 由于test2并没有被内部函数引用,所以test2依然保存在调用栈中。

预解析器和惰性解析器

详细说明

www.cnblogs.com/goloving/p/…

截屏2023-05-10 下午4.46.17.png

在变量环境中加入closure的引用 所以先走词法再走变量再走closure再走outer

总的来说,产生闭包的核心有两步:第一步是需要预扫描内部函数;第二步是把内部函数引用的外部变量保存到堆中。

总结 原始类型和引用类型原始类型和引用类型。

其中,原始类型的数据是存放在栈栈中,引用类型的数据是存放在堆堆中的。

innerBar返回后,含有setName和getName对象,这两个对象里面包含了堆中的closure(foo)的引用。虽然foo执行上下文销毁了,foo函数中的对closure(foo)的引用也断开了,但是setName和get Name里面又重新建立起来了对closure(foo)引用。

你可以:
1:打开“开发者工具”

2:在控制台执行上述代码
3:然后选择“Memory”标签,点击"takesnapshot"获取V8的堆内存快照。
4:然后“command+f"(mac)或者"ctrl+f"(win),搜索“setName”,然后你就会发现setName对象下面
包含了raw_outer_scope_info_or_feedback_metadata,对闭包的引用数据就在这里面。

深拷贝方法

JSON.parse(JSON.stringify(obj))

递归遍历对象+Object.assigin()