首页 > 文章 > 前端

JS生成器函数yield暂停机制解析

时间：2025-11-24 08:18:34 330浏览收藏

本文深入解析了 JavaScript 中生成器函数的核心机制——`yield` 暂停原理。生成器函数通过 `yield` 关键字实现函数的暂停与恢复，每次调用 `next()` 方法，函数会执行到 `yield` 处，返回值并暂停，同时保留函数状态。再次调用 `next()` 时，函数从上次暂停的位置继续执行，这使得生成器函数具备了惰性求值、异步流程控制和状态机管理等优势。文章结合代码示例，详细阐述了 `yield` 的暂停与恢复机制，以及 `next()` 方法的传参交互，帮助开发者深入理解生成器函数在 JavaScript 中的应用场景和重要性，即使在 `async/await` 普及的今天，理解生成器仍然是掌握协程和迭代器协议的关键。

生成器函数通过 yield 实现暂停与恢复，调用 next() 时执行到 yield 并返回值，状态被保留；再次调用 next() 从上次暂停处继续，支持惰性求值、异步控制和状态机管理。

JS生成器函数_Yield暂停机制解析

生成器函数是 JavaScript 中一种特殊的函数类型，它能够控制函数的执行流程，在运行过程中暂停和恢复。这种能力主要依赖于 yield 关键字。理解 yield 的暂停机制，有助于更好地掌握异步编程、迭代器封装等高级用法。

生成器函数的基本语法

生成器函数通过 function* 定义，调用后返回一个可迭代的生成器对象，而不是立即执行函数体。

function* myGenerator() {
  yield '第一段';
  yield '第二段';
  return '结束';
}

每次调用 next() 方法时，生成器会从上次暂停的位置继续执行，直到遇到下一个 yield 或 return。

Yield 的暂停与恢复机制

yield 表达式的本质是“产出值并暂停执行”。当生成器遇到 yield 时，函数状态被保留（包括上下文变量、执行位置），然后暂停，等待下一次 next() 被调用。

yield 右侧的表达式会被求值，并作为 value 返回在 next() 的结果中
函数执行流在此处中断，不再继续向下执行
下次调用 next() 时，函数从 yield 后面继续运行

例如：

function* counter() {
  let count = 0;
  while (true) {
    yield ++count;
  }
}

const c = counter();
console.log(c.next().value); // 1
console.log(c.next().value); // 2

变量 count 的状态在两次调用之间被保留，说明生成器维护了内部执行上下文。

Yield 与 Next 传参的交互

next() 方法可以接收参数，这个参数会成为上一个 yield 表达式的返回值。这是双向通信的关键。

function* echo() {
  const input = yield '等待输入...';
  console.log('收到：', input);
  yield '处理完成';
}

const e = echo();
console.log(e.next()); // { value: '等待输入...', done: false }
console.log(e.next('你好')); // 收到：你好
// { value: '处理完成', done: false }

第一次 next() 执行到 yield '等待输入...'，暂停并返回。第二次 next('你好') 将 '你好' 赋给了 yield 表达式的左侧，即 input 变量。

应用场景与优势

生成器的暂停机制特别适用于以下场景：

惰性求值：如无限序列、大数据流处理，按需生成值
异步流程控制：配合 Promise 使用，实现类似 async/await 的效果（在 async 出现前常见）
状态机管理：清晰地表示多个状态间的切换

虽然现代 JS 更多使用 async/await 处理异步，但生成器仍是理解协程、迭代器协议的重要基础。

基本上就这些。yield 的暂停不是阻塞，而是交出执行权，等到外部主动恢复。这种协作式控制流让 JS 的函数行为更加灵活。

今天关于《JS生成器函数yield暂停机制解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！