async/await 的底层转换：生成器与状态机 ​

// 生成器基础
class GeneratorBasics {
  static demonstrate() {
    console.log('=== 生成器的核心特性 ===\n');
    
    console.log('生成器函数：');
    console.log('  • 使用function*语法定义');
    console.log('  • 可以暂停和恢复执行');
    console.log('  • 通过yield暂停，通过next()恢复');
    console.log('  • 可以双向传递数据\n');
  }
  
  static demonstrateBasicGenerator() {
    console.log('=== 基本生成器示例 ===\n');
    
    // 定义生成器
    function* simpleGenerator() {
      console.log('  开始执行');
      yield 1;
      console.log('  恢复执行');
      yield 2;
      console.log('  再次恢复');
      return 3;
    }
    
    const gen = simpleGenerator();
    console.log('创建生成器对象后...');
    
    console.log('\n第一次next()：');
    console.log('  结果:', gen.next());
    
    console.log('\n第二次next()：');
    console.log('  结果:', gen.next());
    
    console.log('\n第三次next()：');
    console.log('  结果:', gen.next());
    console.log('');
  }
  
  static demonstrateDataPassing() {
    console.log('=== 生成器数据传递 ===\n');
    
    function* dataGenerator() {
      const a = yield 'first';
      console.log('  收到a:', a);
      
      const b = yield 'second';
      console.log('  收到b:', b);
      
      return a + b;
    }
    
    const gen = dataGenerator();
    
    console.log('next():', gen.next());
    console.log('next(10):', gen.next(10));
    console.log('next(20):', gen.next(20));
    console.log('');
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateBasicGenerator();
    this.demonstrateDataPassing();
  }
}

GeneratorBasics.runAll();

// async函数转换
class AsyncTransformation {
  static demonstrate() {
    console.log('=== async函数转换为生成器 ===\n');
    
    console.log('原始async函数：');
    console.log(`
    async function fetchData() {
      const response = await fetch('/api');
      const data = await response.json();
      return data;
    }
    `);
    
    console.log('转换后的等效代码：');
    console.log(`
    function fetchData() {
      return spawn(function* () {
        const response = yield fetch('/api');
        const data = yield response.json();
        return data;
      });
    }
    `);
    
    console.log('转换规则：');
    console.log('  • async → 普通函数 + spawn包装');
    console.log('  • await → yield');
    console.log('  • 返回值自动包装为Promise\n');
  }
  
  static demonstrateSpawn() {
    console.log('=== spawn函数实现 ===\n');
    
    console.log('spawn负责自动执行生成器：');
    console.log(`
    function spawn(generatorFunc) {
      return new Promise((resolve, reject) => {
        const generator = generatorFunc();
        
        function step(nextFn) {
          let result;
          try {
            result = nextFn();
          } catch (e) {
            return reject(e);
          }
          
          if (result.done) {
            return resolve(result.value);
          }
          
          // 等待Promise完成后继续
          Promise.resolve(result.value).then(
            value => step(() => generator.next(value)),
            error => step(() => generator.throw(error))
          );
        }
        
        step(() => generator.next());
      });
    }
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateSpawn();
  }
}

AsyncTransformation.runAll();

// 状态机转换
class StateMachineConversion {
  static demonstrate() {
    console.log('=== 状态机转换原理 ===\n');
    
    console.log('生成器函数：');
    console.log(`
    function* example() {
      const a = yield 1;
      const b = yield 2;
      return a + b;
    }
    `);
    
    console.log('转换为状态机（概念）：');
    console.log(`
    function example() {
      let state = 0;
      let a, b;
      let inputValue;
      
      return {
        next(value) {
          inputValue = value;
          
          switch (state) {
            case 0:
              state = 1;
              return { value: 1, done: false };
              
            case 1:
              a = inputValue;
              state = 2;
              return { value: 2, done: false };
              
            case 2:
              b = inputValue;
              state = 3;
              return { value: a + b, done: true };
              
            default:
              return { value: undefined, done: true };
          }
        }
      };
    }
    `);
  }
  
  static demonstrateStates() {
    console.log('=== 状态转换图 ===\n');
    
    console.log('  ┌─────────────────────────────────────┐');
    console.log('  │           状态机执行流程             │');
    console.log('  └─────────────────────────────────────┘');
    console.log('');
    console.log('  state=0 ──next()──→ state=1 ──next()──→ state=2');
    console.log('     │                   │                   │');
    console.log('     ↓                   ↓                   ↓');
    console.log('   yield 1            yield 2            return');
    console.log('');
    console.log('  每次调用next()：');
    console.log('    1. 根据当前state执行对应代码块');
    console.log('    2. 更新state到下一个值');
    console.log('    3. 返回yield的值或最终结果\n');
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateStates();
  }
}

StateMachineConversion.runAll();

// V8实现细节
class V8Implementation {
  static demonstrate() {
    console.log('=== V8中的JSAsyncFunction ===\n');
    
    console.log('V8内部结构：');
    console.log(`
    class JSAsyncFunctionObject {
      // 底层生成器对象
      JSGeneratorObject generator;
      
      // 关联的Promise
      JSPromise promise;
    }
    `);
    
    console.log('JSGeneratorObject结构：');
    console.log(`
    class JSGeneratorObject {
      // 函数对象
      JSFunction function;
      
      // 执行上下文
      Context context;
      
      // 接收器(this)
      Object receiver;
      
      // 输入/输出值
      Object input_or_debug_pos;
      
      // 恢复模式
      Smi resume_mode;
      
      // 字节码偏移（当前执行位置）
      Smi continuation;
      
      // 暂存的寄存器值
      FixedArray parameters_and_registers;
    }
    `);
  }
  
  static demonstrateContinuation() {
    console.log('=== continuation字段 ===\n');
    
    console.log('continuation记录暂停位置：');
    console.log('  • 存储字节码偏移量');
    console.log('  • 恢复时从该位置继续');
    console.log('  • 特殊值表示完成或异常\n');
    
    console.log('特殊值：');
    console.log('  -1：生成器关闭');
    console.log('  0：生成器刚创建，未开始');
    console.log('  >0：暂停位置的字节码偏移\n');
  }
  
  static demonstrateResumeMode() {
    console.log('=== resume_mode字段 ===\n');
    
    console.log('恢复模式决定如何继续执行：');
    console.log('  • kNext: 正常恢复（next调用）');
    console.log('  • kReturn: 提前返回（return调用）');
    console.log('  • kThrow: 抛出异常（throw调用）');
    console.log('  • kRethrow: 重新抛出异常\n');
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateContinuation();
    this.demonstrateResumeMode();
  }
}

V8Implementation.runAll();

// await执行流程
class AwaitExecution {
  static demonstrate() {
    console.log('=== await的执行步骤 ===\n');
    
    console.log('代码：');
    console.log(`
    async function example() {
      console.log('1');
      const result = await Promise.resolve(42);
      console.log('2', result);
      return result;
    }
    `);
    
    console.log('V8处理步骤：');
    console.log('');
    console.log('  1. 执行同步代码');
    console.log('     └─ 输出 "1"');
    console.log('');
    console.log('  2. 遇到await');
    console.log('     ├─ 获取await后的表达式值');
    console.log('     ├─ 如果不是Promise，包装为Promise');
    console.log('     └─ 创建PromiseReaction等待结果');
    console.log('');
    console.log('  3. 暂停生成器');
    console.log('     ├─ 保存continuation（恢复位置）');
    console.log('     ├─ 保存寄存器状态');
    console.log('     └─ 返回控制权给事件循环');
    console.log('');
    console.log('  4. Promise完成时');
    console.log('     ├─ PromiseReactionJob入队微任务');
    console.log('     └─ Job执行时恢复生成器');
    console.log('');
    console.log('  5. 恢复执行');
    console.log('     ├─ 恢复寄存器状态');
    console.log('     ├─ 将Promise结果传入生成器');
    console.log('     └─ 继续执行后续代码');
    console.log('');
  }
  
  static demonstrateAwaitPromiseResolution() {
    console.log('=== Await Promise Resolution ===\n');
    
    console.log('V8的AwaitPromise处理：');
    console.log(`
    function AwaitPromise(promise, asyncFunction) {
      // 1. 确保是Promise
      const thenable = Promise.resolve(promise);
      
      // 2. 创建处理器
      const onFulfilled = (value) => {
        // 恢复async函数，传入value
        Resume(asyncFunction, value, kNext);
      };
      
      const onRejected = (reason) => {
        // 恢复async函数，抛出异常
        Resume(asyncFunction, reason, kThrow);
      };
      
      // 3. 注册回调
      thenable.then(onFulfilled, onRejected);
    }
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateAwaitPromiseResolution();
  }
}

AwaitExecution.runAll();

// 手动实现async/await
class ManualImplementation {
  // 模拟spawn函数
  static spawn(generatorFunc) {
    return new Promise((resolve, reject) => {
      const generator = generatorFunc();
      
      function step(type, value) {
        let result;
        
        try {
          if (type === 'next') {
            result = generator.next(value);
          } else if (type === 'throw') {
            result = generator.throw(value);
          }
        } catch (error) {
          return reject(error);
        }
        
        if (result.done) {
          return resolve(result.value);
        }
        
        // 确保是Promise
        Promise.resolve(result.value).then(
          val => step('next', val),
          err => step('throw', err)
        );
      }
      
      step('next', undefined);
    });
  }
  
  static demonstrate() {
    console.log('=== 手动实现async函数 ===\n');
    
    // 原始async函数
    console.log('原始async函数：');
    console.log(`
    async function fetchUser(id) {
      const response = await fetch('/user/' + id);
      const user = await response.json();
      return user.name;
    }
    `);
    
    // 转换后的版本
    console.log('转换后的生成器版本：');
    
    function fetchUser(id) {
      return ManualImplementation.spawn(function* () {
        // 模拟fetch
        const response = yield new Promise(resolve => {
          setTimeout(() => resolve({ 
            json: () => Promise.resolve({ name: 'Alice' })
          }), 100);
        });
        
        const user = yield response.json();
        return user.name;
      });
    }
    
    // 测试
    fetchUser(1).then(name => {
      console.log('获取到用户名:', name);
    });
  }
  
  static demonstrateErrorHandling() {
    console.log('=== 错误处理 ===\n');
    
    function withErrorHandling() {
      return ManualImplementation.spawn(function* () {
        try {
          const result = yield Promise.reject(new Error('测试错误'));
          return result;
        } catch (error) {
          console.log('捕获错误:', error.message);
          return 'fallback';
        }
      });
    }
    
    withErrorHandling().then(result => {
      console.log('最终结果:', result);
    });
  }
  
  static runAll() {
    this.demonstrate();
    setTimeout(() => {
      this.demonstrateErrorHandling();
    }, 200);
  }
}

ManualImplementation.runAll();

// 性能考量
class PerformanceConsiderations {
  static demonstrateOverhead() {
    console.log('=== async/await开销 ===\n');
    
    console.log('开销来源：');
    console.log('  • 每个await产生至少一个微任务');
    console.log('  • 生成器对象创建和状态保存');
    console.log('  • Promise包装和解析\n');
    
    console.log('示例分析：');
    console.log(`
    async function sequential() {
      await step1();  // 微任务1
      await step2();  // 微任务2
      await step3();  // 微任务3
      return result;  // 总共至少3个微任务
    }
    `);
  }
  
  static demonstrateOptimization() {
    console.log('=== 优化策略 ===\n');
    
    console.log('1. 避免不必要的await：');
    console.log(`
    // 不推荐
    async function unnecessary() {
      return await somePromise;  // 多余的await
    }
    
    // 推荐
    async function better() {
      return somePromise;  // 直接返回Promise
    }
    `);
    
    console.log('2. 并行执行独立操作：');
    console.log(`
    // 串行（慢）
    async function serial() {
      const a = await fetchA();
      const b = await fetchB();
      return a + b;
    }
    
    // 并行（快）
    async function parallel() {
      const [a, b] = await Promise.all([
        fetchA(),
        fetchB()
      ]);
      return a + b;
    }
    `);
    
    console.log('3. 减少await数量：');
    console.log(`
    // 多个await
    async function multiple() {
      const a = await getA();
      const b = await getB();
      const c = await getC();
      return process(a, b, c);
    }
    
    // 合并为一个
    async function single() {
      const [a, b, c] = await Promise.all([
        getA(), getB(), getC()
      ]);
      return process(a, b, c);
    }
    `);
  }
  
  static runAll() {
    this.demonstrateOverhead();
    this.demonstrateOptimization();
  }
}

PerformanceConsiderations.runAll();

// 调试技巧
class DebuggingTechniques {
  static demonstrate() {
    console.log('=== async函数调试 ===\n');
    
    console.log('1. 异步堆栈跟踪：');
    console.log('   Chrome DevTools自动显示async调用栈');
    console.log('   V8维护异步调用链信息\n');
    
    console.log('2. 断点位置：');
    console.log('   可在await前后设置断点');
    console.log('   每个await相当于一个暂停点\n');
    
    console.log('3. 常见问题：');
    console.log('   • 忘记await导致返回Promise');
    console.log('   • try-catch范围不正确');
    console.log('   • 并发问题（竞态条件）\n');
  }
  
  static demonstrateCommonMistakes() {
    console.log('=== 常见错误 ===\n');
    
    console.log('错误1: 忘记await');
    console.log(`
    async function mistake1() {
      const result = someAsyncOperation();  // 忘记await
      console.log(result);  // 输出Promise对象
    }
    `);
    
    console.log('错误2: 循环中的await');
    console.log(`
    // 串行执行，很慢
    async function mistake2(items) {
      for (const item of items) {
        await process(item);  // 一个一个处理
      }
    }
    
    // 并行执行，更快
    async function correct(items) {
      await Promise.all(items.map(item => process(item)));
    }
    `);
    
    console.log('错误3: 错误处理不当');
    console.log(`
    // Promise可能被忽略
    async function mistake3() {
      try {
        return someAsyncOperation();  // 没有await
      } catch (e) {
        // 永远不会捕获到错误
      }
    }
    
    // 正确写法
    async function correct() {
      try {
        return await someAsyncOperation();
      } catch (e) {
        // 可以捕获错误
      }
    }
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateCommonMistakes();
  }
}

DebuggingTechniques.runAll();

// V8优化
class V8Optimizations {
  static demonstrate() {
    console.log('=== V8的async优化 ===\n');
    
    console.log('1. 零成本异步栈跟踪：');
    console.log('   V8在编译时插入元数据');
    console.log('   运行时无需额外开销\n');
    
    console.log('2. await优化（V8 7.2+）：');
    console.log('   await已解析的Promise不产生微任务');
    console.log('   直接同步恢复执行\n');
    
    console.log('3. Promise内联：');
    console.log('   简单的async函数可能被内联');
    console.log('   减少函数调用开销\n');
  }
  
  static demonstrateFastPath() {
    console.log('=== await快速路径 ===\n');
    
    console.log('场景：await一个已解析的Promise');
    console.log(`
    async function example() {
      // Promise.resolve(42)已经是fulfilled状态
      const value = await Promise.resolve(42);
      return value;
    }
    `);
    
    console.log('V8优化：');
    console.log('  旧版本：仍产生微任务，下一轮执行');
    console.log('  新版本：检测到已解析，直接恢复\n');
    
    console.log('验证代码：');
    console.log(`
    async function test() {
      console.log('1');
      await Promise.resolve();  // 已解析的Promise
      console.log('2');
    }
    
    test();
    console.log('3');
    
    // 旧版本输出: 1, 3, 2
    // 新版本可能: 1, 2, 3（取决于具体优化）
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateFastPath();
  }
}

V8Optimizations.runAll();

// 对比分析
class ComparisonWithGenerators {
  static demonstrate() {
    console.log('=== async/await vs 生成器 ===\n');
    
    console.log('相同点：');
    console.log('  • 都能暂停和恢复执行');
    console.log('  • 都基于状态机实现');
    console.log('  • 都保存执行上下文\n');
    
    console.log('不同点：');
    console.log('');
    console.log('  async/await:');
    console.log('    • 专为Promise设计');
    console.log('    • 自动执行，无需手动next()');
    console.log('    • 返回Promise');
    console.log('    • 内置错误处理');
    console.log('');
    console.log('  生成器:');
    console.log('    • 通用的迭代协议');
    console.log('    • 需要手动或通过runner执行');
    console.log('    • 返回Iterator');
    console.log('    • 支持双向数据流\n');
  }
  
  static demonstrateEquivalent() {
    console.log('=== 等效代码对比 ===\n');
    
    console.log('async/await版本：');
    console.log(`
    async function fetchSequence() {
      const a = await fetchA();
      const b = await fetchB(a);
      return b;
    }
    `);
    
    console.log('生成器版本：');
    console.log(`
    function* fetchSequence() {
      const a = yield fetchA();
      const b = yield fetchB(a);
      return b;
    }
    
    // 需要runner执行
    run(fetchSequence).then(result => {
      console.log(result);
    });
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateEquivalent();
  }
}

ComparisonWithGenerators.runAll();