Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数的基本形式
function* generator() {
console.log('start genetator');
yield 'hello';
yield 'world';
return 'end';
}
从上面的代码可以看出，Generator 函数有两个基本的特质：
- function 和函数名之间有一个 ** * ** 号
- 函数体中存在 yield 语句
Generator 函数会放回一个遍历器对象，遍历器对象拥有 next() 方法，可以将 Generator 函数内的状态指针移像下一个状态，即yield 语句所标记的状态，并将yield语句后面表达式的计算值返回
Generator 函数的调用与普通函数相同。但是需要注意的是，调用 Generator 函数并不会立即执行其内部的代码，而是会等待返回的遍历器调用 next() 方法时，移动状态指针，再执行代码
var g = generator(); // 控制台无输出 返回遍历器对象
g.next() // 返回 {value:"hello", done: false} 控制台输出 'start generator'
g.next() // 返回 {value:"world", done: false}
g.next() // 返回 {value:"end', done: true}
g.next() // 返回 {value:undefined, done: true}
调用 next() 方法时，遍历器对象g会返回一个包含 value 和 done 属性的对象，其中 value 的值是 yield 或 return 后表达式值，而 done 为布尔值，表示该遍历器是否已遍历结束，如果已遍历结束再调用 next() 方法，value 的值将会是 undefined
return语句表示遍历已结束，done 为 true，之后在调用 next() 方法，不管后面还有没有 yield 语句，都不会使状态移动；如果没有 return 语句，遍历器将会在状态指向最后一个 yield 后再次调用 next() 时，将 done 改为 true
因为 Generator 函数返回的是一个遍历器对象，所以可以对这个遍历器对象使用 for … of 来一次性遍历其所有的状态
for (var state of g) {
console.log(state);
}
// "start generator"
// "hello"
// "world"
从上面的代码可以看出，for … of 并不会获取到 return 语句后面的表达式值，但是在遍历状态的同时，会执行其他的代码
next() 方法的参数
上面在调用 next() 方法时，并没有传入参数，但是 next() 方法可以传入一个参数，同时这个参数会作为上一个 yield 的返回值
function* generator() {
var a = yield 'this is a generator';
console.log(a);
yield a+1;
}
var g = generator();
g.next(); // {value: "this is a generator", done: false}
g.next(2);
// 2
// {value: 3, done: false}
从上面的代码可以看出，第二次调用 next() 方法时传入的参数 2 ，被当做了 第一个 yield 语句 yield 'this is a generator' 的返回值，此时 a = 2
Generator 函数原型链上的两个方法
Generator .prototype.throw()
这个方法是 Generator 函数原型链上抛出错误的方法，该方法抛出的错误可以被函数内部和外部捕获
function* generator() {
try {
yield;
} catch (e) {
console.log('inner catch', e);
}
};
var g = generator();
g.next();
try {
g.throw(new Error('error A'));
g.throw(new Error('error B'));
} catch (e) {
console.log('outer catch', e);
}
// inner catch Error: error A
// outer catch Error: error B
从上面的代码可以看出，通过 throw() 方法抛出的错误先是被内部捕获并抛出，因为内部的 catch 语句已经执行过，就无法再捕捉到第二个 throw() 抛出的错误，此时该错误被函数体外部的 catch() 方法所捕获并抛出
Generator.prototype.throw() 与 全局 throw 命令之间的区别
全局 throw 命令抛出的错误无法被 Generator 函数内部捕获，同时，这两个方法完全无关，互不影响
Generator .prototype.return()
该方法能够将参数作为下一个状态的返回值，同时结束遍历
function* generator() {
yield 1;
yield 2;
yield 3;
};
var g = generator():
g.next();
g.return(4);
g.next();
// {value: 1, done: false}
// {value: 4, done: true}
// {value: undefined, done: true}
如果调用 return() 方法时无参数，则 value 值将是 undefined 同时结束遍历
当函数体中有 try … finally 代码块时，return() 方法将会推迟到代码块执行结束后执行
function* generator() {
yield 1;
try {
yield 2;
} finally {
yield 3;
}
yield(4)
};
var g = generator();
g.next();
g.next();
g.return(5);
g.next();
// {value: 1, done: false}
// {value: 2, done: false}
// {value: 3, done: false}
// {value: 5, done: done}
yield* 语法
在 Generator 函数中是无法调用另一个 Generator 函数的，如果想要调用，那么就需要用到 yield* 语法
function* generator1() {
yield 'a';
yield 'b';
};
function* generator2() {
yield 1;
yield* generator1();
yield 2;
};
以上代码等同于：
function* generator2() {
yield 1;
yield 'a';
yield 'b';
yield 2;
};
从上面可以看出， yield* 号表示的就是返回一个遍历器对象，这样才可以在另一个 Generator 函数中调用
如果被调用的 Generator 函数有 return 语句，那么 return 后面的表达式将会作为这个 Generator 函数的返回值
function* generator1() {
yield 'a';
yield 'b';
return 'c';
};
function* generator2() {
yield 1;
var res = yield* generator1();
console.log(res);
yield 2;
};
var g = generator2();
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());
// {value:1, done:false}
// {value:"a", done:false}
// {value:"b", done:false}
// c
// {value:1, done:false}
// {value:undefined, done}
以上就是对 ES6 新增函数 Generator 语法的小结啦！如果有任何问题，还请小伙伴们能够及时指正！
网友评论