第21天 Generator 原理

Generator 是 ES6 中新增的语法，和 Promise ⼀样，都可以⽤来异步编 程

// 使⽤ * 表示这是⼀个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调⽤ next 恢复执⾏
function* test() {
 let a = 1 + 2;
 yield 2;
 yield 3; }
let b = test();
console.log(b.next()); // > { value: 2, done: false }
console.log(b.next()); // > { value: 3, done: false }
console.log(b.next()); // > { value: undefined, done: true }

从以上代码可以发现，加上 * 的函数执⾏后拥有了 next 函数，也就是说 函数执⾏后返回了⼀个对象。每次调⽤ next 函数可以继续执⾏被暂停的代 码。以下是 Generator 函数的简单实现

// cb 也就是编译过的 test 函数
function generator(cb) {
 return (function() {
	 var object = {
		 next: 0,
		 stop: function() {}
	 };
	 return {
	 	next: function() {
		 var ret = cb(object);
		 if (ret === undefined) return { value: undefined, done: true };
			return {
			 value: ret,
			 done: false
			 };
		 	}
		 };
	 })(); 
}
// 如果你使⽤ babel 编译后可以发现 test 函数变成了这样
function test() {
 var a;
 return generator(function(_context) {
 while (1) {
 switch ((_context.prev = _context.next)) {
 // 可以发现通过 yield 将代码分割成⼏块
 // 每次执⾏ next 函数就执⾏⼀块代码
	 // 并且表明下次需要执⾏哪块代码
	 case 0:
		 a = 1 + 2;
		 _context.next = 4;
	 return 2;
	 case 4:
		 _context.next = 6;
	 return 3;
	// 执⾏完毕
	 case 6:
	 case "end":
	 	return _context.stop();
	 	}
	 }
 }); 
}