首页 > 文章 > 前端

JS生成器函数yield暂停原理解析

时间：2025-12-01 19:00:37 157浏览收藏

深入理解 JavaScript 生成器函数中的 `yield` 暂停机制。本文详细解析了生成器函数如何通过 `yield` 关键字实现函数的暂停与恢复，每次调用 `next()` 方法，函数执行至 `yield` 处便会暂停并返回值，同时保留当前状态。再次调用 `next()`，函数将从上次暂停的位置继续执行。这种机制赋予了生成器函数强大的能力，包括惰性求值、异步流程控制以及状态机管理。通过具体示例，我们将探讨 `yield` 与 `next()` 传参的交互，以及生成器函数在现代 JavaScript 开发中的应用与优势，助你掌握这一关键特性，提升异步编程和迭代器封装的技能。

生成器函数通过 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学习网公众号！