唐山市网站建设_网站建设公司_Linux_seo优化

让函数“暂停”：用 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 解决了哪些传统痛点？

比如你想根据用户角色决定是否加载评论：

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？

1. 学习原理：理解async/await是如何构建在 Generator 之上的。
2. 自定义控制流：比如实现状态机、协程调度、游戏帧更新逻辑等。
3. 惰性序列生成：如大数据分页、无限滚动的数据源模拟。
4. 构建工具库：如果你在写一个流程编排引擎，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 的身影。

它或许不再流行，但从没过时。