Bootstrap

JavaScript 中的 Generator 函数及其方法

JavaScript 中的 Generator 函数 是一种特殊的函数类型,它能够中断并恢复执行,这使得它在处理复杂的异步逻辑、协程等场景中非常有用。它的行为与普通的函数不同,因为它可以在执行过程中暂停,允许函数在某个点上“暂停”执行,之后可以继续从暂停点执行。

什么是 Generator 函数?

Generator 函数通过 function* 声明,返回一个特殊的 Generator 对象,其核心机制是 yield 关键字。这个对象有一个可以“暂停”并在以后恢复执行的能力。

当调用一个 Generator 函数时,它不会立即执行,而是返回一个 Generator 对象

调用next()函数在每个 yield 语句处暂停。当我们调用 next() 时,它会继续执行到下一个 yield

例子:

function* count() {
  console.log("Start");
  yield 1;
  console.log("Continue");
  yield 2;
  console.log("End");
  yield 3;
}

const counter = count();// 返回 Generator 对象
console.log(counter.next()); // Start 1
console.log(counter.next()); // Continue 2
console.log(counter.next()); // End 3

1.next() 方法

作用
  • next() 是控制 Generator 执行的主要方法,它会恢复 Generator 函数的执行,直到下一个 yield
  • 每次调用 next(),都会返回一个对象 { value, done }
    • value: 当前 yield 表达式的返回值。
    • done: 布尔值,指示生成器是否已完成执行。
用法与返回值
function* gen() {
  yield 1;
  yield 2;
  return 3;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }
console.log(g.next()); // { value: 3, done: true }
console.log(g.next()); // { value: undefined, done: true }
  • g.next():调用 next() 时,Generator 会继续执行,直到遇到下一个 yield 或函数结束。如果没有 yield,它会直接返回一个 done: true 对象。
参数传递

next() 可以接收一个参数,这个参数会作为上一次 yield 表达式的返回值,传递给生成器。


function* gen() {
  const a = yield 'What is your name?';
  const b = yield 'What is your age?';
  return `${a} is ${b} years old.`;
}

const g = gen();
console.log(g.next());            // { value: 'What is your name?', done: false }
console.log(g.next('Alice'));     // { value: 'What is your age?', done: false }
console.log(g.next(30));          // { value: 'Alice is 30 years old.', done: true }

在上述代码中,第一次 next() 返回一个字符串 'What is your name?'。当我们向生成器传递参数('Alice'30)时,参数会依次传递给 ab,最终返回 "Alice is 30 years old."

3. throw() 方法

作用
  • throw() 方法可以用来在 Generator 函数中抛出错误。
  • 它会中断当前的 yield 并跳到最近的 catch 块中。如果 Generator 中没有 try-catch 语句捕获错误,那么 throw() 会终止执行,并返回一个 done: true 的结果。
用法与返回值
function* gen() {
  try {
    yield 1;
  } catch (err) {
    console.log(err); // 捕获到错误
    yield 2;
  }
  yield 3;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.throw("Oops!")); // "Oops!" { value: 2, done: false }
console.log(g.next()); // { value: 3, done: true }
  • g.throw("Oops!"):在执行到 yield 1 时,抛出一个错误 Oops!,这个错误会被 try-catch 捕获,并在捕获后继续执行 yield 2。如果 throw() 被调用的时机不合适(比如没有 try-catch),生成器将停止执行并返回一个 { value: undefined, done: true } 对象。
没有 catch 时的行为
function* gen() {
  yield 1;
  yield 2;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.throw("Error")); // Error { value: undefined, done: true }

在这个例子中,调用 g.throw() 会导致生成器抛出错误并终止执行,因为没有 catch 语句来捕获该错误。

4. return() 方法

作用
  • return() 用于提前结束 Generator 函数,并返回一个结果。
  • return() 会使得生成器结束执行,并返回 { value, done: true } 对象,done 属性为 true
  • 返回的 value 会作为返回值传递给 return() 调用的地方。
用法与返回值
function* gen() {
  yield 1;
  yield 2;
  return 3;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.return(4)); // { value: 4, done: true }
console.log(g.next()); // { value: undefined, done: true }
  • g.return(4):这个方法会立即结束生成器,并返回 { value: 4, done: true }。注意:如果在 Generator 函数中调用 return,它会停止 Generator 的执行。

5. next(), throw(), return() 的总结与对比

方法作用返回值适用场景
next()恢复执行 Generator,直到下一个 yield 或结束{ value: any, done: boolean }用于继续执行 Generator,并返回下一个 yield 的值。
throw()在 Generator 中抛出一个错误{ value: any, done: boolean }用于处理错误,并在 Generator 内部抛出异常。
return()结束 Generator 函数的执行{ value: any, done: true }用于提前结束 Generator,并返回结果。

总结

Generator 函数和其方法(next(), throw(), return())提供了对函数执行流程的精确控制。通过 yield 暂停执行,next() 恢复执行,throw() 处理错误,return() 提前结束生成器,这使得 Generator 函数在处理异步编程、协程、流控制等场景中非常有用。掌握这些方法,可以帮助开发者更好地控制异步操作和复杂逻辑的执行过程。

;