浏览器原理 11 # 栈空间和堆空间：数据是如何存储的？

说明

浏览器工作原理与实践专栏学习笔记

例子

例子1：

function foo(){
    var a = 1
    var b = a
    a = 2
    console.log(a) // 2
    console.log(b) // 1
}
foo()

例子2：

function foo(){
    var a = {name:"凯小默"}
    var b = a
    a.name = "kaimo" 
    console.log(a) // {name: "kaimo"}
    console.log(b) // {name: "kaimo"}
}
foo()

为什么出现上面两种不同的情况？

JavaScript 是什么类型的语言

声明变量的特点：

1. 在使用之前就需要确认其变量数据类型的称为静态语言（比如：C 语言）
2. 在运行过程中需要检查数据类型的语言称为动态语言（比如：JavaScript 语言）

把 int 型的变量悄悄转换为 bool 型的变量，通常把这种偷偷转换的操作称为隐式类型转换。

1. 支持隐式类型转换的语言称为弱类型语言（C 和 JavaScript 都是弱类型语言。）
2. 不支持隐式类型转换的语言称为强类型语言

语言类型图

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

1. 弱类型：意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型，JavaScript 引擎在运行代码的时候自己会计算出来。
2. 动态：意味着你可以使用同一个变量保存不同类型的数据

JavaScript 中的数据类型

注意点

• 第一点：使用 typeof 检测 Null 类型时，返回的是 Object。

  • 这是当初 JavaScript 语言的一个 Bug，一直保留至今，之所以一直没修改过来，主要是为了兼容老的代码

• 第二点：Object 类型比较特殊，它是由上述 7 种类型组成的一个包含了 key-value 对的数据类型
• 第三点：把前面的 7 种数据类型称为原始类型，把最后一个对象类型称为引用类型

  • 之所以把它们区分为两种不同的类型，是因为它们在内存中存放的位置不一样。

内存空间

在 JavaScript 的执行过程中， 主要有三种类型内存空间

1. 代码空：主要是存储可执行代码的
2. 栈空间：原始类型的数据值都是直接保存在“栈”中
3. 堆空间：引用类型的值是存放在“堆”中

例子：

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

执行到第 3 行时的调用栈状态图：变量 a 和变量 b 的值都是存放在栈中的。

执行第 4 行代码：由于 JavaScript 引擎判断右边的值是一个引用类型，JavaScript 引擎并不是直接将该对象存放到变量环境中，而是将它分配到堆空间里面，分配后该对象会有一个在“堆”中的地址，然后再将该数据的地址写进 c 的变量值，最终分配好内存的示意图如下所示：

为什么一定要分“堆”和“栈”两个存储空间呢？所有数据直接存放在“栈”中不就可以了吗？

这是因为 JavaScript 引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。

调用栈中切换执行上下文状态

通常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。

堆空间很大，能存放很多大的数据，不过缺点是分配内存和回收内存都会占用一定的时间。

最后一步将变量 c 赋值给变量 d：

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

闭包的内存模型

以思考题为例：

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())

当 foo 函数的执行上下文销毁时，由于 foo 函数产生了闭包，所以变量 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 依然保存在调用栈中。

闭包的产生过程：

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