要了解数据是如何存储的,需要先了解 JavaScript 的数据类型以及内存空间的种类。

在 JavaScript 中,有8种数据类型,分别为 Boolean、String、Number、BigInt、Undefined、Null、Symbol 和 Object。前七种数据类型称为原始类型,而最后一种成为引用类型。之所以区分原始类型和引用类型,主要是它们在内存中存储的位置不一样。

在 JavaScript 执行过程中主要涉及三种不同类型的内存空间,分别是代码空间(用于存储可执行代码)、栈空间(即调用栈)和堆空间。

下面通过一个简单的例子来看看数据的存储:

function foo(){
    var a = "极客时间"
    var b = a
    var c = {name:"极客时间"}
    var d = c
}
foo()

Pasted image 20240319150330

执行一段代码时,需要先编译,并创建执行上下文,然后再按照顺序执行代码。上面的图片是代码执行到当 var d = c 时调用栈跟堆空间的状态。

从图中可以看出,变量 a 和变量 b 存储的原始类型数据是直接存放在栈中的。但变量 cd 对应的对象数据存放则不一样。JavaScript 引擎并不是直接将对象存放到变量环境中,而是将它分配到堆空间中。而在变量环境中存放的是这个对象在堆空间中的地址。

为什么不是所有数据都存放到栈中?

栈具有固定的大小限制,大小通常在编译时确定。由于大小固定,所以在存储数据时要求数据的大小是已知的、固定的,并且在编译时就能确定。

堆的大小并不固定,可以根据需要动态分配和释放内存。堆的存储和访问方式相对复杂,需要使用指针来查找和访问数据。由于堆的灵活性,它可以存储任意大小的数据,甚至是动态增长的数据结构。

由于 JavaScript 的原始类型数据具有固定的大小,可以直接存储在栈中。而对象类型的数据则具有动态的大小,无法直接存储在栈中。对象存储在堆中,多个引用可以指向同一个对象,它们共享同一份数据。这样的话,可以有效地节省内存空间,并支持动态增长的数据结构。

闭包的内存模型

下面通过一个简单的例子来分析闭包的内存模式:

function foo() {
    var myName = "极客时间"
    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("极客邦")
bar.getName()
console.log(bar.getName())

从内存模型的角度分析这段代码的执行流程:

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

通过上面的分析,我们可以画出执行到 foo 函数中 return innerBar 语句时的调用栈状态,如下图所示:

Pasted image 20240319164218

从上图你可以清晰地看出,当执行到 foo 函数时,闭包就产生了;当 foo 函数执行结束之后,返回的 getNamesetName 方法都引用“closure(foo)”对象,所以即使 foo 函数退出了,“ closure(foo)”依然被其内部的 getNamesetName 方法引用。所以在下次调用bar.setName或者bar.getName时,创建的执行上下文中就包含了“closure(foo)”。

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

参考资料