Async/Await 编译产物分析：Generator 状态机是如何保存局部变量上下文的

各位同学，大家好。今天我们将深入探讨JavaScript异步编程领域一个既强大又优雅的特性：async/await。它极大地改善了异步代码的可读性和可维护性，让异步代码看起来就像同步代码一样。然而，async/await并非语言底层原生的魔法，它本质上是一种语法糖，其背后依赖的正是我们今天要剖析的核心机制——Generator函数和状态机。

我们将聚焦于一个关键问题：当一个async函数在await点暂停执行后，其内部的局部变量上下文是如何被保存下来的，以便在后续恢复执行时能够正确地访问和使用这些变量？理解这一点，对于我们深入理解JavaScript的运行时机制，以及编写更高效、更健壮的异步代码至关重要。

第一部分：异步编程的演进与Async/Await的魅力

在JavaScript的早期，处理异步操作主要依赖于回调函数。当异步操作嵌套层级增多时，我们很快就会陷入臭名昭著的“回调地狱”（Callback Hell），代码变得难以阅读、难以维护，也容易出错。

// 回调地狱示例
getData(function(data1) {
    processData1(data1, function(processedData1) {
        saveData1(processedData1, function(result1) {
            getData2(function(data2) {
                // ... 更多嵌套
            });
        });
    });
});

为了解决回调地狱的问题，Promise应运而生。Promise提供了一种更结构化的方式来处理异步操作，通过链式调用.then()方法，将异步操作的成功和失败分离开来，极大地改善了代码的可读性。

// Promise示例
getData()
    .then(data1 => processData1(data1))
    .then(processedData1 => saveData1(processed1))
    .then(result1 => getData2())
    .then(data2 => { /* ... */ })
    .catch(error => console.error(error));

尽管Promise是巨大的进步，但当我们需要处理一系列顺序执行的异步操作，或者需要在异步操作之间进行条件判断、循环时，Promise链仍然可能显得冗长，并且在某些场景下，其扁平化的结构仍然不如同步代码直观。例如，一个try...catch块在Promise链中需要特殊的处理。

async/await正是在此背景下诞生的。它允许我们使用类似同步代码的风格来编写异步代码，极大地提升了开发体验。async函数会隐式地返回一个Promise，而await关键字则暂停async函数的执行，直到其后面的Promise解决（resolved）或拒绝（rejected）。

// async/await 示例
async function fetchDataAndProcess() {
    try {
        const data1 = await getData(); // 暂停，等待getData完成
        const processedData1 = await processData1(data1); // 暂停，等待processData1完成
        const result1 = await saveData1(processedData1); // 暂停，等待saveData1完成
        const data2 = await getData2(); // 暂停，等待getData2完成
        console.log("所有数据处理完毕:", data2);
        return data2;
    } catch (error) {
        console.error("处理过程中发生错误:", error);
        throw error; // 重新抛出错误
    }
}

fetchDataAndProcess();

这段代码的可读性与同步代码几乎无异，try...catch也能够自然地捕获异步操作中的错误。async/await的这种魔力并非凭空而来，而是建立在JavaScript的Generator函数之上。

第二部分：Generator函数：Async/Await的基石

要理解async/await的底层机制，我们必须先了解Generator函数。Generator函数是ES6引入的一种特殊函数，它允许函数在执行过程中暂停和恢复，从而实现迭代器协议。

一个Generator函数通过function*语法定义，并且在函数体内使用yield关键字来暂停函数的执行并返回一个值。每次调用Generator函数的next()方法时，函数会从上次yield的地方恢复执行，直到遇到下一个yield或函数结束。

function* myGenerator() {
    console.log("Step 1");
    const val1 = yield 1; // 暂停，返回1
    console.log("Step 2, received:", val1);
    const val2 = yield 2; // 暂停，返回2
    console.log("Step 3, received:", val2);
    return 3; // 函数结束，返回3
}

const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next("hello")); // { value: 2, done: false } (val1 = "hello")
console.log(gen.next("world")); // { value: 3, done: true } (val2 = "world")
console.log(gen.next()); // { value: undefined, done: true }

从上述例子可以看出：

1. Generator函数调用后不会立即执行，而是返回一个迭代器对象。
2. 每次调用迭代器对象的next()方法，Generator函数会从上次暂停的地方恢复执行，直到遇到下一个yield表达式。
3. yield表达式的值作为next()方法返回对象的value属性。
4. next()方法可以接收一个参数，这个参数会作为上一个yield表达式的返回值。
5. 当Generator函数执行完毕，或者遇到return语句时，done属性变为true，value属性为return的值（如果没有return语句则为undefined）。

正是Generator函数这种“暂停-恢复”的能力，为async/await提供了底层的执行模型。我们可以手动编写一个简单的“运行器”来将基于Generator的异步操作串联起来：

// 模拟一个异步操作
function asyncOperation(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(`Async operation finished with: ${value}`);
            resolve(value * 2);
        }, 1000);
    });
}

// 简单的Generator运行器
function run(generatorFunc) {
    const generator = generatorFunc();

    function step(nextFn) {
        let generatorResult;
        try {
            generatorResult = nextFn();
        } catch (error) {
            return Promise.reject(error);
        }

        const { value, done } = generatorResult;

        if (done) {
            return Promise.resolve(value);
        }

        // 确保value是一个Promise
        return Promise.resolve(value).then(
            res => step(() => generator.next(res)),
            err => step(() => generator.throw(err))
        );
    }

    return step(() => generator.next(undefined));
}

// 使用Generator函数模拟async/await
function* myAsyncWorkflow() {
    console.log("Start workflow");
    const result1 = yield asyncOperation(10);
    console.log("Received result1:", result1); // result1 = 20

    const result2 = yield asyncOperation(result1);
    console.log("Received result2:", result2); // result2 = 40

    // 可以在这里模拟错误
    // yield Promise.reject(new Error("Something went wrong!"));

    const finalResult = yield asyncOperation(result2);
    console.log("Final result:", finalResult); // finalResult = 80
    return finalResult;
}

run(myAsyncWorkflow)
    .then(finalVal => console.log("Workflow completed with:", finalVal))
    .catch(error => console.error("Workflow failed:", error));

// 这段代码的执行效果与下面的async/await代码非常相似：
/*
async function myAsyncWorkflowAwait() {
    console.log("Start workflow");
    const result1 = await asyncOperation(10);
    console.log("Received result1:", result1);
    const result2 = await asyncOperation(result1);
    console.log("Received result2:", result2);
    const finalResult = await asyncOperation(result2);
    console.log("Final result:", finalResult);
    return finalResult;
}
myAsyncWorkflowAwait();
*/

这个run函数正是async/await在编译层面所做事情的简化模型。它接受一个Generator函数，并管理其执行流程：每当yield一个Promise时，run函数就等待这个Promise解决，然后将解决的值传回Generator函数，并继续执行。

第三部分：从Async/Await到Generator状态机的转化概览

现在，我们已经有了Generator函数的基础知识，可以开始探讨async函数是如何被编译器（如Babel或TypeScript）转换为Generator函数和状态机的。

一个async函数在编译后，其核心结构会被转化为一个Generator函数。async函数中的await关键字，本质上会转化为Generator函数中的yield关键字，后面跟着一个Promise。

考虑一个简单的async函数：

async function exampleAsyncFunction(input) {
    let a = input + 1;
    const b = await Promise.resolve(a + 2); // 第一个await点
    let c = b * 2;
    const d = await Promise.resolve(c + 3); // 第二个await点
    return d;
}

这段代码的编译产物，其核心逻辑将是一个Generator函数。这个Generator函数将会：

1. 管理执行流程：通过内部的状态变量和switch语句，记录当前执行到哪个await点。
2. 暂停与恢复：当遇到await时，yield出后面的Promise，暂停执行。当Promise解决后，其结果通过next()方法传回，Generator从yield点之后恢复执行。
3. 保存局部变量上下文：这是我们今天的重点。在await点暂停时，a, b, c等局部变量的值必须被保存下来，以便在恢复执行时能够继续使用。

我们可以想象，一个async函数在编译时大致会经历以下转换：

// 原始的 async 函数
async function exampleAsyncFunction(input) {
    let a = input + 1;
    const b = await Promise.resolve(a + 2);
    let c = b * 2;
    const d = await Promise.resolve(c + 3);
    return d;
}

// 概念上的 Generator 转换
function exampleAsyncFunction_compiled_generator(input) {
    let _state = 0; // 内部状态变量，追踪执行位置
    // 假设存在一个 _context 对象或闭包变量来保存局部变量
    let _a, _b, _c;

    // 辅助函数，用于将Promise传递给next()，并处理结果
    const _await = (promise) => {
        // 这里的实现会比这复杂，但核心是yield promise
        return yield promise;
    };

    return (function* () { // 实际的Generator函数
        while (true) {
            switch (_state) {
                case 0:
                    // 对应原始函数开始执行
                    _a = input + 1;
                    _state = 1; // 更新状态到下一个await点
                    // yield出Promise.resolve(_a + 2)
                    _b = yield Promise.resolve(_a + 2);
                    // 当Promise解决后，其结果会通过next()参数传给_b
                case 1:
                    // 从第一个await点恢复
                    _c = _b * 2;
                    _state = 2; // 更新状态到下一个await点
                    // yield出Promise.resolve(_c + 3)
                    _d = yield Promise.resolve(_c + 3);
                case 2:
                    // 从第二个await点恢复
                    return _d; // 函数结束，返回结果
            }
        }
    })(); // 立即调用并返回迭代器
}

请注意，上述代码是一个高度简化的概念模型。实际的编译器产物会更加复杂和精巧，但其核心思想是相通的。其中最关键的一点就是：局部变量a、b、c是如何在Generator函数暂停时被保存，并在恢复时被正确访问的？

第四部分：局部变量上下文的保存机制：核心问题与解决方案

async函数在await点暂停时，它的执行上下文会被“冻结”。当异步操作完成，async函数恢复执行时，它必须能够访问到暂停前的所有局部变量。这与Generator函数的工作方式完美契合，因为Generator函数的局部变量在yield暂停后并不会丢失。

核心思想：闭包与状态对象

编译器解决这个问题的关键在于利用JavaScript的闭包（Closure）特性和构建一个内部状态对象（Internal State Object）。

当async函数被编译成Generator函数时，这个Generator函数以及它的一些辅助变量（如状态变量、用于存储局部变量的对象）通常会被封装在一个更大的作用域中，形成一个闭包。这个闭包保证了即使async函数（或其编译后的Generator迭代器）被多次调用或在不同的事件循环任务中恢复，它也能访问到其特定的局部变量。

编译器的具体策略通常如下：

1. 状态变量 (_state 或 _label):

   • 在生成的Generator函数内部（或其外部的闭包作用域中），会有一个整数类型的变量，我们称之为_state或_label。
   • 这个变量用于标记async函数当前执行到的位置。每个await表达式之前或之后，_state的值都会更新。
   • 当Generator函数恢复执行时，switch语句会根据_state的值跳转到正确的代码块。

2. 内部状态容器 (_context 或 _f.sent):

   • 所有需要在await点前后保持其值的局部变量，都会被“提升”或“转移”到一个内部的状态容器中。
   • 这个容器通常是一个普通的JavaScript对象，其属性名对应原始async函数中的局部变量名。
   • 这个状态容器本身就存在于Generator函数所处的闭包作用域中，因此在Generator函数暂停和恢复时，它会一直存在。

3. switch语句:

   • Generator函数的主体通常被一个大的switch语句包裹。
   • switch语句的判断条件就是_state变量。
   • 每个case对应async函数中的一个代码块，通常是两个await表达式之间的一段代码。
   • yield表达式会出现在每个case的末尾，或者在更新_state之后。

表格：局部变量到状态对象属性的映射

为了更直观地理解，我们可以用一个表格来表示原始async函数中的局部变量如何被映射到编译产物中的状态对象属性。

原始async函数中的局部变量	编译产物中的对应位置/名称	类型/说明
input (参数)	Generator函数参数，或存入_context.input	函数参数，通常在Generator入口时就可用或存入状态
a, b, c, d (局部变量)	_context.a, _context.b, _context.c, _context.d (或类似)	存储在闭包作用域内的对象属性，用于跨await点保存其值
_state / _label	内部状态变量	整数，指示Generator当前执行到的状态或代码块
_sent	内部变量，存储next()或throw()传入的值	每次next()调用时，上一个yield表达式的结果会赋值给此变量，然后赋给对应局部变量
_error	内部变量，存储throw()传入的错误	每次throw()调用时，错误会赋值给此变量，用于错误处理

第五部分：深入分析：带局部变量的Async函数编译产物

现在，我们通过具体的代码示例来深入分析这个转换过程。我们将模拟Babel或TypeScript等编译器生成的核心逻辑。

示例1: 简单的局部变量和多个await点

我们再次使用之前的exampleAsyncFunction。

// 原始的 async 函数
async function exampleAsyncFunction(input) {
    let a = input + 1;
    console.log("Before first await, a:", a);
    const b = await Promise.resolve(a + 2); // 第一个await点
    console.log("After first await, b:", b);
    let c = b * 2;
    console.log("Before second await, c:", c);
    const d = await Promise.resolve(c + 3); // 第二个await点
    console.log("After second await, d:", d);
    return d;
}

// 模拟的编译产物 (概念性，简化了辅助函数)
// 这是一个自执行函数，返回一个被包装的Generator函数
function _asyncToGenerator(generatorFunc) {
    return function (...args) {
        const generator = generatorFunc.apply(this, args); // 创建Generator迭代器
        let resolve, reject;
        const p = new Promise((res, rej) => { resolve = res; reject = rej; });

        function step(key, arg) {
            let info;
            try {
                info = generator[key](arg);
            } catch (error) {
                return reject(error);
            }

            const { value, done } = info;

            if (done) {
                return resolve(value);
            }

            return Promise.resolve(value).then(
                val => step("next", val),
                err => step("throw", err)
            );
        }

        step("next"); // 启动Generator
        return p; // 返回最终的Promise
    };
}

const exampleAsyncFunction_compiled = _asyncToGenerator(function* (input) {
    let _context = { // 内部状态对象，保存局部变量
        input: input,
        a: undefined,
        b: undefined,
        c: undefined,
        d: undefined,
    };
    let _state = 0; // 状态变量
    let _sent; // 存储next()或throw()传入的值

    while (true) {
        switch (_state) {
            case 0: // 初始状态，对应函数开始
                _context.a = _context.input + 1;
                console.log("Before first await, a:", _context.a);
                _state = 1; // 转移到下一个状态
                // yield出Promise，等待其解决，解决的值会通过next()传入_sent
                _sent = yield Promise.resolve(_context.a + 2);
            case 1: // 从第一个await点恢复
                _context.b = _sent; // 将_sent的值赋给局部变量b
                console.log("After first await, b:", _context.b);
                _context.c = _context.b * 2;
                console.log("Before second await, c:", _context.c);
                _state = 2; // 转移到下一个状态
                _sent = yield Promise.resolve(_context.c + 3);
            case 2: // 从第二个await点恢复
                _context.d = _sent; // 将_sent的值赋给局部变量d
                console.log("After second await, d:", _context.d);
                return _context.d; // 函数执行完毕，返回结果
            default: // 默认情况，通常是错误处理
                return;
        }
    }
});

// 调用编译后的函数
exampleAsyncFunction_compiled(5).then(res => console.log("Final result:", res));

/*
预期输出:
Before first await, a: 6
After first await, b: 8
Before second await, c: 16
After second await, d: 19
Final result: 19
*/

分析：

1. _asyncToGenerator 辅助函数：这是一个外部的包装器，它接收我们编译后的Generator函数，并返回一个普通函数。当我们调用这个普通函数时，它会启动Generator，并返回一个Promise，这个Promise将代表整个async函数的最终结果。这个辅助函数负责调用Generator的next()和throw()方法，并处理yield出来的Promise。
2. _context 对象：这是核心。原始async函数中的所有局部变量（a, b, c, d）以及函数参数（input）都被存储在这个_context对象中。由于_context对象是在_asyncToGenerator内部被创建，并由返回的Generator函数所形成的闭包捕获，因此它的生命周期贯穿整个async函数的执行过程。
3. _state 变量：这个变量追踪当前的执行位置。case 0是入口点，case 1是第一个await点之后，case 2是第二个await点之后。每次yield之前，_state都会更新，确保下次恢复时能跳转到正确的位置。
4. _sent 变量：当Generator的next()方法被调用时，传入的参数（即yield出来的Promise解决后的值）会赋给_sent。然后，在相应的case块中，_sent的值会被赋给对应的局部变量（例如，_context.b = _sent;）。

示例2: 循环与条件语句中的局部变量

当async函数中包含循环或条件语句时，局部变量的保存机制依然有效。编译器会确保这些变量在相应的作用域内被正确地管理。

// 原始的 async 函数
async function loopAsyncFunction(count) {
    let results = [];
    for (let i = 0; i < count; i++) {
        let tempVal = i * 10;
        const res = await Promise.resolve(tempVal + 1);
        results.push(res);
    }
    if (count > 0) {
        let finalCheck = results[0] + results[results.length - 1];
        await Promise.resolve(finalCheck);
        return finalCheck;
    }
    return 0;
}

// 模拟的编译产物 (简化版，仅展示核心逻辑)
const loopAsyncFunction_compiled = _asyncToGenerator(function* (count) {
    let _context = { // 状态对象
        count: count,
        results: [],
        i: undefined, // 循环变量
        tempVal: undefined, // 循环内部变量
        res: undefined, // await结果变量
        finalCheck: undefined, // if块内部变量
    };
    let _state = 0;
    let _sent;

    while (true) {
        switch (_state) {
            case 0: // 初始状态
                _context.results = [];
                _context.i = 0;
            case 1: // for循环的条件判断和初始化
                if (!(_context.i < _context.count)) { // 循环结束
                    _state = 3; // 跳转到if语句
                    break; // 跳出switch，进入下一个迭代或结束
                }
                _context.tempVal = _context.i * 10;
                _state = 2; // 转移到await点
                _sent = yield Promise.resolve(_context.tempVal + 1);
            case 2: // 从await点恢复，for循环内部
                _context.res = _sent;
                _context.results.push(_context.res);
                _context.i++; // 循环变量递增
                _state = 1; // 回到循环条件判断
                break; // 跳出switch，进入下一个迭代
            case 3: // if语句块
                if (_context.count > 0) {
                    _context.finalCheck = _context.results[0] + _context.results[_context.results.length - 1];
                    _state = 4; // 转移到if块内的await点
                    _sent = yield Promise.resolve(_context.finalCheck);
                } else {
                    return 0; // if条件不满足
                }
            case 4: // 从if块内的await点恢复
                // _sent的值在这里可能不需要赋值给任何变量，因为finalCheck已经赋值
                return _context.finalCheck; // 返回if块的结果
            default:
                return 0; // 默认返回
        }
    }
});

loopAsyncFunction_compiled(3).then(res => console.log("Loop final result:", res));
// 预期输出: Loop final result: 22 (1 + 21)

分析：

• 循环变量i和内部变量tempVal, res：这些变量都被添加到_context对象中。每次循环迭代，它们的值都会在_context中更新。
• 状态管理循环：case 1和case 2共同构成了for循环的逻辑。_state在1和2之间切换，直到循环条件_context.i < _context.count不再满足。
• if语句的处理：if语句也通过_state进行管理。如果条件满足，则进入case 3和case 4。
• break语句：在每个case的末尾使用break是为了跳出当前的switch语句，允许while(true)循环继续执行，并根据更新后的_state在下一次迭代中进入正确的case。

示例3: 错误处理 (try...catch)

try...catch块在async函数中是直接可用的，这得益于Generator的throw()方法。当await的Promise被拒绝时，_asyncToGenerator辅助函数会调用Generator的throw()方法，将错误注入到Generator中，从而触发catch块的逻辑。

// 原始的 async 函数
async function errorAsyncFunction() {
    let value = 10;
    try {
        console.log("Entering try block, value:", value);
        await Promise.resolve(value + 1); // 成功 Promise
        value = await Promise.reject(new Error("Oops, an error occurred!")); // 拒绝 Promise
        console.log("This line will not be reached.");
    } catch (e) {
        console.error("Caught error:", e.message, "Value before error:", value);
        value = 20;
        await Promise.resolve("Recovered");
        console.log("After recovery await, value:", value);
    } finally {
        console.log("Finally block executed, final value:", value);
    }
    return value;
}

// 模拟的编译产物 (再次简化，重点展示try/catch/finally)
const errorAsyncFunction_compiled = _asyncToGenerator(function* () {
    let _context = {
        value: undefined,
        _error: undefined, // 用于存储捕获的错误
    };
    let _state = 0;
    let _sent;
    let _tryStack = []; // 模拟try块的堆栈，用于finally的执行

    // 状态定义：
    // 0: 初始
    // 1: try块内部 - 第一个await前
    // 2: try块内部 - 第二个await前
    // 3: catch块内部 - await前
    // 4: finally块
    // 5: 结束

    while (true) {
        try { // 外层try...catch用于捕获Generator内部的同步错误
            switch (_state) {
                case 0: // 初始状态，进入try块
                    _context.value = 10;
                    _tryStack.push(4); // 标记finally块的状态
                    console.log("Entering try block, value:", _context.value);
                    _state = 1;
                    _sent = yield Promise.resolve(_context.value + 1);
                case 1: // try块内，第一个await恢复
                    // _sent的值在这里没被使用，但通常会赋值给一个变量
                    _state = 2; // 转移到下一个await点
                    _sent = yield Promise.reject(new Error("Oops, an error occurred!"));
                case 2: // try块内，第二个await恢复 (此状态通常不会到达)
                    console.log("This line will not be reached.");
                    // 如果到达这里，说明前面的reject没被捕获，那么就直接结束并执行finally
                    _state = _tryStack.pop() || 5; // 执行finally或结束
                    break; // 跳出switch
                case 3: // catch块
                    console.error("Caught error:", _context._error.message, "Value before error:", _context.value);
                    _context.value = 20;
                    _state = 4; // 转移到finally块
                    _sent = yield Promise.resolve("Recovered");
                case 4: // finally块，或从catch块的await恢复
                    console.log("After recovery await, value:", _context.value);
                    console.log("Finally block executed, final value:", _context.value);
                    _state = 5; // 结束
                    return _context.value; // 返回结果
                case 5: // 结束状态
                    return _context.value;
                default:
                    throw new Error("Invalid state: " + _state);
            }
        } catch (error) {
            // 当Generator.throw(error)被调用时，或内部发生同步错误时
            // 如果当前在try块内，则跳转到catch块
            if (_tryStack.length > 0 && (_state === 0 || _state === 1 || _state === 2)) {
                _context._error = error; // 存储错误对象
                _state = 3; // 跳转到catch块的状态
                // 确保finally会执行
            } else {
                // 如果不在try块内，或者catch块也抛出错误，则重新抛出
                throw error;
            }
        }
    }
});

errorAsyncFunction_compiled().then(res => console.log("Error function final return:", res));

/*
预期输出:
Entering try block, value: 10
Caught error: Oops, an error occurred! Value before error: 10
After recovery await, value: 20
Finally block executed, final value: 20
Error function final return: 20
*/

分析：

• _error变量：用于存储catch块需要访问的错误对象。
• _tryStack / _finally机制：这是一个简化模型。实际编译器会更复杂，但核心思想是：当进入try块时，会记录一个表示finally块的标签或状态。无论try块正常完成还是抛出错误，都会在最后跳转到这个finally状态。
• _state的跳转：
  • case 0, case 1, case 2 对应try块。
  • 当Promise.reject发生时，_asyncToGenerator会调用generator.throw(error)。
  • Generator接收到throw()后，其内部的try...catch（外层捕获）会捕获到这个错误。
  • 如果此时_state在try块的范围内（0, 1, 2），则会将错误存入_context._error，并将_state设置为3（catch块的开始）。
  • 从catch块（case 3）恢复后，它会跳转到case 4（finally块）。
• finally的保证：无论try块是正常完成、通过return退出、还是通过throw抛出错误，finally块对应的case (case 4) 都会被执行。在Generator状态机中，这通常意味着finally的代码逻辑会在所有try和catch的路径上被插入或通过状态跳转来保证执行。

通过这些例子，我们可以清晰地看到，async/await的局部变量上下文的保存，正是通过将这些变量“提升”到Generator函数所捕获的闭包作用域中的一个状态对象上，并结合状态变量和switch语句来精确控制执行流程。

第六部分：实际编译器（Babel/TypeScript）的实现细节与优化

我们上面模拟的编译产物虽然揭示了核心机制，但实际的编译器会生成更复杂、更健壮、更优化的代码。以Babel为例，它会使用一个名为_asyncToGenerator的辅助函数来封装转换逻辑。

Babel的_asyncToGenerator通常会创建一个闭包，其中包含了：

• _this / _arguments: 如果async函数中使用了this或arguments，它们会在函数入口处被捕获。
• _f 变量 (或类似): 这是一个关键的内部对象，通常用来存储Generator的状态信息，包括：
  • _f.label：对应我们说的_state，表示当前执行到哪个await点。
  • _f.sent：对应我们说的_sent，存储next()方法传入的值。
  • _f.t：存储throw()方法传入的错误对象。
  • _f.next：一个包装函数，用于调用Generator的next()方法并处理结果。
  • _f.throw：一个包装函数，用于调用Generator的throw()方法并处理错误。
• 局部变量：原始async函数中的局部变量会被编译器分析，只将那些需要在await点前后保持状态的变量提升到_f对象（或其他类似容器）的属性上。对于那些在await前定义、在await后不再使用的变量，或者仅在同步代码块中使用的变量，可能不会被提升，从而减少开销。

以下是一个简化的Babel风格的编译产物骨架：

// Babel _asyncToGenerator 辅助函数的核心
function _asyncToGenerator(fn) {
  return function () {
    var self = this, args = arguments;
    return new Promise(function (resolve, reject) {
      var gen = fn.apply(self, args); // 创建Generator迭代器
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
      }
      _next(undefined); // 启动Generator
    });
  };
}

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }
  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

// 编译后的 async function skeleton
var myAsyncFunction = /*#__PURE__*/ (function () {
  var _ref = _asyncToGenerator(function* (param1, param2) {
    var _f = { label: 0, sent: function () { throw new Error("Generator is already running"); } }; // 核心状态对象

    // 原始函数的局部变量被转换为 _f 对象的属性，或直接在闭包中
    var localVar1, localVar2;

    while (true) {
      switch (_f.label) {
        case 0: // 初始状态
          // 捕获this和arguments（如果需要）
          // param1, param2 也会被处理
          localVar1 = param1 + 1;
          _f.label = 1; // 更新状态
          _f.sent = yield Promise.resolve(localVar1); // yield Promise
        case 1: // 从第一个await恢复
          localVar2 = _f.sent * 2; // 使用_f.sent获取await结果
          _f.label = 2; // 更新状态
          _f.sent = yield Promise.resolve(localVar2); // yield Promise
        case 2: // 从第二个await恢复
          return _f.sent; // 返回结果
        // try...catch...finally 的 case 也会在这里复杂地展开
      }
    }
  });
  return function myAsyncFunction(param1, param2) {
    return _ref.apply(this, arguments);
  };
})();

这里的_f对象就是我们之前讨论的_context和_state的结合体。它在Generator函数内部被创建，并由_asyncToGenerator函数返回的闭包捕获，从而保证了其状态在整个异步流程中不丢失。

这种编译方式虽然增加了代码的体积和一定的运行时开销，但它提供了巨大的可读性优势，使得开发者能够以更直观的方式编写复杂的异步逻辑。现代JavaScript引擎对这种模式也进行了大量的优化，使得其性能表现通常非常接近甚至超越手动编写的Promise链。

第七部分：性能考量与尾声

async/await通过将代码转换为Generator状态机来实现，这无疑引入了一些额外的开销。这些开销主要体现在：

1. 闭包创建：每次调用async函数都会创建一个新的闭包作用域，以及用于保存局部变量的状态对象（如Babel中的_f）。
2. 对象属性访问：局部变量从直接的栈变量变成了对象属性，访问它们可能略微慢于直接变量。
3. switch跳转：状态机的while(true)循环和switch语句会带来微小的跳转开销。
4. Promise封装：await的本质是yield一个Promise，这涉及到Promise的创建、解决和拒绝的开销。

然而，这些开销在绝大多数应用场景下都是可以忽略不计的。现代JavaScript引擎（V8、SpiderMonkey等）对Promise和Generator的执行都进行了高度优化。它们能够识别这种模式，并可能在JIT编译阶段将其优化为更高效的机器码。

更重要的是，async/await带来的可读性、可维护性和错误处理的便利性，远远超过了这点微小的性能损耗。它将异步代码的复杂性从开发者的心智负担中解脱出来，使得开发者能够专注于业务逻辑，而不是异步流程的控制。

所以，async/await的局部变量上下文保存机制，是JavaScript编译器利用闭包、Generator函数以及状态机模式，巧妙地在语言层面实现了异步代码的“暂停-恢复”与状态维护。它不是魔法，而是精妙的工程设计，极大地提升了前端和Node.js开发的效率和体验。理解其底层原理，有助于我们更好地驾驭异步编程，编写出更优雅、更健壮的JavaScript应用程序。