学习Generator原理

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

• Generator最大特点就是可以交出函数的执行权（即暂停执行） 它和普通函数的写法不太一样，主要有两个不同

一、function关键字与函数名之间有一个星号；

二、Generator函数内部使用yield语句，可以定义不同的内部状态；
状态，其实就是数据，(内部的状态，就是函数内部的值，它在不同的时候，是不一样的)

//例如：
function* test(){
	yield 'a';
}

• yield命令是异步不同阶段的分界线，所以说，有时也会把yield当成是return，
  当然了，yield跟return有本质的不同，需要使用.next()方法，可以理解为是一个“启动方法”，作用是分阶段的执行generator函数

• 每次调用.next()方法，会返回一个对象
  表示当前阶段的信息，
  value属性，done属性
  done属性值分为两种状态
  1、true，表示函数已经执行完了
  2、false，表示函数未执行完
  注意：若done属性值为true函数执行完后，再调用next方法的话，value的值就是undefined的了

// 定义Generator函数
function* test(){
	yield 'a';
	yield 'b';
	yield 'c';
	return 'd'
}
var toTets = test()
// 第一次调用
console.log(toTets.next())
// 第二次调用
console.log(toTets.next())
// 第三次调用
console.log(toTets.next())
// 第四次调用
console.log(toTets.next())
// 第五次调用
console.log(toTets.next())

• 最后再写一个例子结束今天的generator学习

function* xxfn(){
	var n = 1;
	var v =yield n+22;
	console.log("aa---:"+v)
	yield ++n;
	yield ++n;
}

var _xxfn = xxfn();
_xxfn.next("abc")
console.log(_xxfn.next())
console.log(_xxfn.next())

function* xxfn(){
	var n = 1;
	var v = yield n+22;
	console.log("aa---:"+v)
	yield ++n;
	yield ++n;
}

var _xxfn = xxfn();
/** 
*第一次调用，执行的是
* yield n+22 ===》yield 1+22 ===》yield 23
 */ 
console.log(_xxfn.next())

/**
 *第二次调用，执行的是
 * 1.先读取next("abc")
 * 2.var v = yield n+22中，n+22 已被abc参数所替代
 * 3.var v = 'abc'
 * 4.执行console.log("aa---:"+v)==>aa---:abc
 */
_xxfn.next("abc")
// console.log(_xxfn.next("abc"))

/**
 *第三次调用打印输出的值，对于初学者或许有些不解
 *其实理解了next方法的执行原理，就清晰的知道其为什么了
 * 第二次调用，虽然其传了新的参数，但是n的值并没有被改变
 * 你可以尝试打印输出一下console.log(_xxfn.next("abc"))==>值2
 * 那第三次调用，值就为3
 */

console.log(_xxfn.next())