ES6-Generator
Generator
关键词：状态机，遍历器，同步方式写异步方法
基本概念
- 形式上，Generator函数是一个普通函数，但是有两个特征。
- function关键字与函数名之间有一个星号。
- 二是，函数体内部使用yield语句，定义不同的内部状态。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
var h = helloWorldGenerator();
- 调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。
// 接上面的demo
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
yield语句
- yield语句不能用在普通函数中，否则会报错
(function (){
yield 1;
})()
- yield语句如果用在一个表达式之中，必须放在圆括号里面
console.log('Hello' + yield); // SyntaxError
console.log('Hello' + yield 123); // SyntaxError
console.log('Hello' + (yield)); // OK
console.log('Hello' + (yield 123)); // OK
- yield语句用作函数参数或赋值表达式的右边，可以不加括号
foo(yield 'a', yield 'b'); // OK
let input = yield; // OK
return()
- 如果主动调用return()方法，Generator函数将被终结
function* gen(){
yield 1;
yield 2;
yield 3;
}
var g = gen();
g.next() // {value: 1, done: false}
g.return('foo') // {value: 'foo', done: true}
g.next() // {value: undefined, done: true}
- 但是，如果Generator函数内部有try...finally代码块，那么return方法会推迟到finally代码块执行完再执行。
function* gen(){
try{
yield 1;
}finally{
yield 2;
}
yield 3;
}
var g = gen();
g.next() // {value: 1, done: false}
g.return(10) // {value: 2, done: false}
g.next() // {value: 10, done: true}
yield*
- 在一个Generater函数内部直接调用另外一个Generater函数无效
function* outer(){
yield 1;
yield inner();
return 3;
}
function* inner(){
yield 2;
}
var o = outer();
o.next(); // {value: 1, done: false}
o.next(); // {value: inner, done: false}
o.next(); // {value: 3, done: true}
- 上面的情况可以使用
yield*解决
function* outer(){
yield 1;
yield* inner(); // 调用方法与上面不同
return 3;
}
function* inner(){
yield 2;
}
var o = outer();
o.next(); // {value: 1, done: false}
o.next(); // {value: 2, done: false} // 返回结果与上面不同
o.next(); // {value: 3, done: true}
- 任何数据结构只要有Iterator接口，就可以被yield*遍历。
function* demo(){
yield* [1, 2, 3];
}
var d = demo();
d.next(); // {value: 1, done: false}
d.next(); // {value: 2, done: false}
d.next(); // {value: 3, done: false}
d.next(); // {value: undefined, done: true}
- 如果被代理的Generator函数有return语句，那么就可以向代理它的Generator函数返回数据。
function* outer(){
yield 1;
var i = yield* inner();
yield 2 + i;
}
function* inner(){
return 2;
}
var o = outer();
o.next(); // {value: 1, done: false}
o.next(); // {value: 4, done: false}
作为对象属性的Generator函数
- 如果一个对象的属性是Generator函数，可以简写成下面的形式。
let obj = {
* gen(){
yield 1;
}
};
var g = obj.gen();
g.next(); // {value: 1, done: false}
Generator函数的this
应用
- 异步操作的同步化表达，逻辑更清晰
function* render(){
showLoading();
var res = yield getData();
hideLoading();
console.log(res); // 打印ajax的结果
}
function getData(){
$.ajax().done(function(res){
r.next(res);
});
}
var r = render();
r.next();
- 控制流管理，摆脱回调函数多层嵌套
// callback方式
function step(){
step1(function(res1){
step2(res1, function(res2){
step3(res2, function(res3){
console.log(res3);
})
})
})
}
// promise方式
function step(){
step1()
.then(step2)
.then(step3)
.then(function({
// do something
}))
}
// Generator方式
function step(){
var res1 = yield step1();
var res2 = yield step2(res1);
var res3 = yield step3(res2);
}
- 多任务并行。如果yield语句后面的参数，是一个具有遍历器接口的对象，yield会遍历这个对象，再往下执行。这意味着，多个任务按顺序一个接一个执行时，yield语句可以按顺序排列。多个任务需要并列执行时（比如只有A任务和B任务都执行完，才能执行C任务），可以采用数组的写法。
function execTaskA(){
return new Promise(function(resolve, reject){
if(true){
resolve('a')
}
})
}
function execTaskB(){
return new Promise(function(resolve, reject){
if(true){
resolve('b')
}
})
}
function* execTasks(){
var [resA, resB] = yield [execTaskA(), execTaskB()];
// let resB = yield* execTaskB();
console.log(resA, resB);
}
var t = execTasks();
t.next();
- 关于Generator函数的自动执行，可以关注github上的
co组件
