Generator 函数基本用法以及原理探究

1. 基本使用

generator 函数是 ES6 提供的一种异步编程解决方案

一个基本的 generator 函数如下

/*
 * 特征
 * 1. 函数带有 * 符号
 * 2. 函数内可以使用 yield 表达式
 * 3. 返回值为 generator 实例 
 * 4. 返回的实例可以调用 next 等一系列内置方法
*/
function* generatorFn() {
	yield 'hello';
	yield 'world';
	return 'ending';
}
const ge = generatorFn()  // generatorFn {} | 返回generator实例
ge.next()

1.1. yield

yield 表达式是暂停标记；函数执行到此处会暂停

function* generatorFn() {
	const list = [{}]
	console.log(list) // 注意：调用 next 函数执行到这一行后，遇到 yield 表达式，则停止执行
	yield 'hello';
	yield 'world';
	return 'ending';
}
const ge = generatorFn()
ge.next() // 注意：要调用 next 方法才会开始执行

1.2. next

next 函数，是 generator 实例中的方法。

1. 启动函数的执行
2. 可以将停止的 generator 函数恢复执行，直到遇见下一个 yield 表达式
3. 遇到 yield 会停止执行

function* generatorFn() {
	const list = [{}]
	console.log(list)
	yield 'hello';
	yield 'world';
	return 'ending';
}
const ge = generatorFn()
ge.next() // [{}];  { value: 'hello', done: false }