generator
generator yield配合使用
一、generator介绍
1.generator函数式es6引入的，用于异步编程
2.最大特点是可以交出函数的执行权（暂停函数）
3.和普通函数写法区别
function关键字和函数名之间有一个星号
内部使用yield，定义不同的状态
本质上generator函数是一个异步任务的容器，yield命令是不同状态的分界线。
function* gen(){
yield 'a';
yield 'b';
yield 'c';
return 'd'
}
二、执行generator（next）
让generator执行起来，需要.next()方法（函数的启动方法），分阶段执行函数。
每次调用.next,会返回一个对象{value:any,done:boolean}
done:函数是否执行完
function* gen(){
yield 'a';
yield 'b';
yield 'c';
return 'd'
}
const _gen = gen();
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );
三、next的传参
yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值，覆盖上一个yield的返回值
function* gen(){
var n = 1;
var x = yield n + 10;
console.log(x,'pause1')
yield ++n;
console.log(x,'pause2')
yield ++n;
}
const _gen = gen();
console.log(_gen.next() );
console.log(_gen.next('aaa'));
console.log(_gen.next() );
作用：分阶段的注入数据，让函数不同阶段给出不同的返回值。
四、迭代器(Iterator)
_gen就是一个迭代器，Generator 函数就是迭代器生成函数。不能存在于普通函数
多个迭代器之间作用域独立
五、for of
for...of
循环可以自动遍历 Generator 函数运行时生成的
Iterator
对象，且此时不再需要调用
next
方法。
for (const iterator of _gen) {
console.log(iterator,'iterator11')
}
一旦
next
方法的返回对象的
done
属性为
true
，
for...of
循环就会中止，且不包含该返回对象，所以上面代码的
return
语句返回的
d
，不包括在
for...of
循环之中。
六、Generator.prototype.throw()
throw
方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获，可加参数
var gen = function* () {
try {
yield 2;
} catch (e) {
console.log('内部捕获', e);
}
};
var _gen = gen();
_gen.next();
try {
_gen.throw('a');
_gen.throw('b');
_gen.throw('c');
} catch (e) {
console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b
1.
_gen.throw
抛出错误以后，没有任何
try...catch
代码块可以捕获这个错误，导致程序报错，中断执行。
2.
throw
方法抛出的错误要被内部捕获，前提是必须至少执行过一次
next
方法。
3…
throw
方法被捕获以后，会附带执行下一条
yield
表达式。也就是说，会附带执行一次
next
方法。
var gen = function* gen(){
try {
yield console.log('a');
} catch (e) {
// ...
}
yield console.log('b');
yield console.log('c');
}
var _gen = gen();
_gen.next() // a
_gen.throw() // b
_gen..next() // c
七、Generator.prototype.return()
迭代器有一个
return()
方法，可以返回给定的值，并且终结 Generator 函数。
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
console.log( g.next() ) // { value: 1, done: false }
console.log( g.return('foo')) // { value: "foo", done: true }
console.log( g.next() ) // { value: undefined, done: true }
如果
return()
方法调用时，不提供参数，则返回值的
value
属性为
undefined
。
八、Generator的this
ES6 规定这个迭代器是 Generator 函数的实例，也继承了 Generator 函数的
prototype
对象上的方法。但是，如果把
g
当作普通的构造函数，并不会生效，因为
g
返回的总是遍历器对象，而不是
this
对象。
function* g() {
this.a = 11;
}
g.prototype.hello = function () {
return 'hi!';
};
let obj = g();
console.log(obj.a)
console.log(obj.hello())
九、应用
1.异步操作的同步化表达
function* loadUI() {
showLoadingScreen();
yield loadUIDataAsynchronously();
hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()
// 卸载UI
loader.next()
上面代码中，第一次调用
loadUI
函数时，该函数不会执行，仅返回一个遍历器。下一次对该遍历器调用
next
方法，则会显示
Loading
界面（
showLoadingScreen
），并且异步加载数据（
loadUIDataAsynchronously
）。等到数据加载完成，再一次使用
next
方法，则会隐藏
Loading
界面。可以看到，这种写法的好处是所有
Loading
界面的逻辑，都被封装在一个函数，按部就班非常清晰。