让函数“暂停”：用 Generator 玩转 JavaScript 的执行流控制
你有没有写过这样的代码？
getData(function(user) { getPosts(user.id, function(posts) { getComments(posts[0].id, function(comments) { // ……再来三层？ }); }); });回调层层嵌套，逻辑绕来绕去，调试像在解迷宫——这就是臭名昭著的“回调地狱”。虽然 Promise 曾经让我们松了一口气，但真正让异步代码变得像同步一样清晰流畅的，其实是它背后的“幕后功臣”：生成器函数（Generator）。
今天我们就来深入聊聊这个 ES6 中被低估却极具设计美感的特性——function*和yield。它不只是个语法糖，而是一种对函数执行流程的革命性控制方式。理解它，才能真正看懂async/await是怎么来的，也才能明白现代 JavaScript 异步模型的底层逻辑。
从“一次性执行”到“可中断函数”：Generator 的本质突破
普通函数一旦调用，就会从头跑到尾，中间不能停。而生成器函数打破了这一铁律：它可以在执行中途暂停，之后再从中断处继续执行。
怎么做到的？靠的是两个关键词：function*和yield。
function*：声明一个“可控”的函数
function* myGen() { console.log('Step 1'); yield 'A'; console.log('Step 2'); yield 'B'; return 'Done'; }注意这个星号*，它不是装饰，是语法的一部分。当你调用：
const gen = myGen(); console.log(gen); // Object [Generator] {}你会发现，函数体里的代码根本没有执行！返回的是一个迭代器对象（Iterator），你可以通过.next()来一步步驱动它：
console.log(gen.next()); // 输出: Step 1 // 返回: { value: 'A', done: false } console.log(gen.next()); // 输出: Step 2 // 返回: { value: 'B', done: false } console.log(gen.next()); // 返回: { value: 'Done', done: true }每调一次.next()，函数就往前走一步，直到遇到下一个yield或结束。这种“分步执行”的能力，正是 Generator 的核心。
关键点：生成器函数不会立即运行，而是返回一个可以“手动推进”的迭代器。
yield：不只是“产出”，更是“双向通信”
很多人以为yield就是个加强版的return，其实它更像一个“数据交换站”。
yield可以接收外部传入的值
看这个例子：
function* echoMachine() { const input1 = yield 'Ready for first?'; console.log('User said:', input1); const input2 = yield 'Ready for second?'; console.log('User said:', input2); return 'Bye!'; } const machine = echoMachine(); console.log(machine.next()); // { value: 'Ready for first?', done: false } console.log(machine.next('Hello')); // { value: 'Ready for second?', done: false } // 同时输出: User said: Hello console.log(machine.next('Hi again')); // { value: 'Bye!', done: true } // 同时输出: User said: Hi again看到没？.next('Hello')传进去的'Hello'，成了第一个yield表达式的返回值。这意味着：外部可以通过.next(value)向生成器内部“注入”数据。
这不仅仅是技巧，它是实现“自动执行异步流程”的基础。
迭代器协议：Generator 天然契合 JS 的遍历机制
JavaScript 有一套标准的遍历规则，叫迭代器协议：只要一个对象有.next()方法，并返回{ value, done }结构，就可以被for...of、扩展运算符等使用。
而生成器函数返回的对象，天生就符合这个协议。这意味着你可以直接这样用：
function* numbers() { yield 1; yield 2; yield 3; } // ✅ 可用于 for...of for (const n of numbers()) { console.log(n); // 1, 2, 3 } // ✅ 可展开为数组 console.log([...numbers()]); // [1, 2, 3]甚至可以轻松实现无限序列，比如斐波那契数列：
function* fibonacci() { let [a, b] = [0, 1]; while (true) { yield b; [a, b] = [b, a + b]; } } // 只取前5个 console.log(Array.from(fibonacci(), (_, i) => i < 5 ? true : false).map((_, i) => [...fibonacci()][i])); // [1, 1, 2, 3, 5]重点是：这些数字是“按需计算”的，不会提前生成整个序列，内存友好，惰性求值。
如何用 Generator 写“看起来像同步”的异步代码？
这才是最精彩的部分。虽然 Generator 本身不处理异步，但我们可以写一个“自动推进器”，让它在每次yield出一个 Promise 后，自动等待其完成，再把结果送回去。
手写一个简单的co风格运行器
function run(genFunc) { const gen = genFunc(); function next(lastValue) { const result = gen.next(lastValue); if (result.done) { return Promise.resolve(result.value); } // 把 yield 出来的值转成 Promise 并等待 return Promise.resolve(result.value) .then(next); // 成功后继续下一步 } return next(); }就这么几十行代码，就能驱动所有基于 Promise 的异步流程！
实战：用户登录流程同步化书写
假设我们有三个异步操作：
const login = () => Promise.resolve({ token: 'abc123' }); const getUserInfo = (token) => Promise.resolve({ id: 1, name: 'Alice' }); const loadFeed = (userId) => Promise.resolve(['Post A', 'Post B']);传统写法可能要.then().then().then()嵌套，或者用async/await。但用 Generator，我们可以这样写：
function* mainFlow() { try { const auth = yield login(); console.log('Logged in:', auth.token); const user = yield getUserInfo(auth.token); console.log('User loaded:', user.name); const feed = yield loadFeed(user.id); console.log('Feed:', feed); return { user, feed }; } catch (err) { console.error('Flow failed:', err.message); } }然后只需一行启动：
run(mainFlow).then(result => { console.log('Workflow completed:', result); });输出顺序完全符合预期，而且错误可以用try/catch统一捕获。代码结构清晰得像伪代码一样。
这就是
async/await的原型。早期的co库就是这么工作的，TJ Holowaychuk 的设计直接影响了后来的语言演进。
Generator 解决了哪些传统痛点？
| 问题 | 传统方案 | Generator 方案 |
|---|---|---|
| 回调嵌套深 | 层层嵌套.then()或回调 | 线性书写，逻辑平铺 |
| 错误处理分散 | 每个.catch()单独处理 | 一个try/catch捕获所有步骤 |
| 控制流复杂 | 难以实现循环、条件跳转 | 支持if、for、return等完整控制结构 |
| 调试困难 | 断点跳跃，上下文丢失 | 同步风格，断点连续推进 |
比如你想根据用户角色决定是否加载评论：
function* conditionalFlow(role) { const user = yield getUserInfo(); if (role === 'admin') { const logs = yield fetchAuditLogs(user.id); console.log('Admin logs:', logs); } const feed = yield loadFeed(user.id); return feed; }这种灵活性，在纯 Promise 链中很难优雅实现。
实际开发中的注意事项：别把它当主力武器
尽管 Generator 功能强大，但在今天的前端开发中，你不应该优先选择它来写异步逻辑。原因很简单：async/await更简洁、更直观、原生支持更好。
那么什么时候还值得用 Generator？
- 学习原理：理解
async/await是如何构建在 Generator 之上的。 - 自定义控制流：比如实现状态机、协程调度、游戏帧更新逻辑等。
- 惰性序列生成：如大数据分页、无限滚动的数据源模拟。
- 构建工具库：如果你在写一个流程编排引擎，Generator 提供了极强的控制力。
使用建议
- ✅用
async/await写业务逻辑 - ✅用 Generator 理解底层机制
- ⚠️ 注意兼容性：低版本 IE 不支持，Node.js < 4 不支持
- ⚠️ 避免长时间同步计算：Generator 不会释放主线程，大量计算仍会阻塞 UI
- ⚠️ 谨慎使用
yield*委托：容易让调用栈变复杂，调试困难
写在最后：掌握执行流，才真正掌握编程
Generator 的伟大之处，不在于它能让你少写几行代码，而在于它改变了我们对“函数”的认知：函数不再是“黑箱执行”，而是可以被外部观察、干预和驱动的执行单元。
它引入了一种新的编程范式：协程（Coroutine）。在这种模式下，函数和调用者之间不再是“主仆关系”，而是“协作关系”——你停一下，我给你数据；你再继续，直到完成。
虽然现在我们更多地用async/await，但它的背后依然是 Generator + Promise + 自动运行器的组合。就像 React 的虚拟 DOM 背后是 JavaScript 对象操作一样，高级语法的背后，往往是基础能力的巧妙组合。
所以，哪怕你永远不用在项目里手写 Generator，也值得花时间搞懂它。因为只有理解了“暂停与恢复”、“双向通信”、“迭代器驱动”这些概念，你才能真正看透 JavaScript 异步世界的运行逻辑。
如果你觉得
async/await是魔法，那 Generator 就是告诉你魔法是怎么变的。
如果你正在学习 Node.js 流、Redux Saga、或者任何基于“惰性求值”或“流程控制”的库，你会发现它们的影子里，都有 Generator 的身影。
它或许不再流行，但从没过时。
