一、先来一个例子

不知道上图有多少人能够看懂，不过不要紧，今天我们就一次性讲清楚。

我尽量用最少的代码，来解释这些概念。

请大家看下下面的代码，来思考一下js的内存分布以及事件循环。

javascript 复制代码

        var globalVar = "全局对象";
        function outerFunction() {
            var outerVar = "外部函数变量";
            var newUser = { name: "蒙多", age: 25 };
            function innerFunction() {
                var innerVar = "内部函数变量";
                setTimeout(function () {
                    console.log("1s计时器结束");
                }, 1000);
                document.getElementById("myButton").addEventListener("click", function () {
                    console.log(newUser.name);
                });
                Promise.resolve().then(function () {
                    console.log("微任务结束");
                });
            }
            innerFunction();
        }
        outerFunction();
        var newUser = { name: "艾希", age: 25 };
        console.log(newUser.name);

二、内存管理

重点提示：栈中操作的单元是"栈帧"，每个栈帧对应独立的上下文。

内存布局

JavaScript 的内存布局主要包括堆和栈。栈内存用于存储函数调用帧和原始类型数据，而堆内存用于存储对象和复杂数据结构。

我们先绘制第一部分的代码内存布局：

在上图中，栈包含多个调用帧，堆中存储着多个对象。js运行时负责压栈操作。

内存布局主要涉及栈和堆两部分：

栈：用于存储函数调用帧（Call Stack），包括函数的局部变量和原始类型数据。即是运行时空间，又是存储空间。
堆：用于存储引用类型的数据，如对象和函数。

栈帧

每次调用一个函数时，会在栈上创建一个新的栈帧，包含该函数的局部变量、参数和返回地址。引用类型的数据存储在堆中，并通过栈中的引用进行访问。

每一帧都是一个作用域或者上下文（scope)，可以在chrome浏览器上看到：

每一个栈帧中，作用于里面复杂类型都是引用类型，基础类型都是copy；

对于在同一个栈中的所有帧，都可以进行 "时光倒流" 。对于同一个栈，可以回退到栈底方向的任意一帧。（有消息队列的时候不行）。

对于纯函数来说，这是一个非常重要的调试技巧。

闭包的形成

栈帧中，从下至上是global->outerFuntion->innerFunction，当一个函数（栈帧）返回的对象是一个函数的时候，就形成了一个闭包。

修改最开始的代码：

ini 复制代码

        var globalVar = "全局对象";
        function outerFunction() {
            var outerVar = "外部函数变量";
            function innerFunction() {
                var innerVar = "内部函数变量";
                console.log(outerVar);
            }
            return innerFunction;
        }
        outerFunction()();

当前程序中，当我们执行闭包的时候，会发现栈帧列表变成了 global->innerFunction。