本文已同步至我的个人主页。欢迎访问查看更多内容!如有错误或遗漏,欢迎随时指正探讨!谢谢大家的关注与支持!
Generator函数是ES6标准中提出的一种异步编程的解决方案。这种函数与普通函数最大的区别在于它可以暂停执行,又可以从暂停的位置恢复继续执行。
从语法上看,Generator函数就是一个状态机,封装了许多内部状态。
从实质上看,Generator函数就是一个遍历器对象生成器。(关于遍历器对象,可以参考阮一峰老师的这篇文章)Generator函数返回一个遍历器对象,遍历这个对象,就可以依次得到函数内部的每一个状态。
定义一个Generator函数和定义一个普通函数的区别在于:
来看一个简单的例子:
// 定义
function* sayHello() {
yield 'hello';
yield 'world';
return 'ending';
}
// 调用
// 注意,hw获取到的值是一个遍历器对象
let g = sayHello();
上面的例子,定义了一个名为sayHello的Generator函数,它内部有两个yield表达式和一个return表达式。所以,该函数内部有三个状态:hello,world 和 return语句(结束执行)。最后,调用这个函数,得到一个遍历器对象并赋值给变量g。
Generator函数的调用方法与普通函数完全一样,函数名()。不同的是:
Generator函数调用后不会立即执行,那么,我们如何让它开始执行内部的代码呢?又如何获取它内部的每一个状态呢?此时,我们必须调用返回的生成器对象的.next()方法,才能开始代码的执行,并且使得指针移向下一个状态。
以上面的例子为例:
g.next();
// { value: 'hello', done: false }
g.next();
// { value: 'world', done: false }
g.next();
// { value: 'ending', done: true }
g.next();
// { value: undefined, done: true }
上面的代码中,一共调用了四次g这个遍历器对象的.next()方法。第一次调用,sayHello这个Generator函数开始执行,直到遇到第一个yield表达式就会暂停执行。.next()方法会返回一个对象,它的value属性就是当前yield表达式的值hello,done属性的值false,表示遍历还没有结束。
第二次再调用.next(),就会执行到第二个yield表达式处,并暂停执行,返回对应的对象。
第三次调用.next(),函数执行到最后的return语句,此时标志着遍历器对象g遍历结束,所以返回的对象中value属性值就是return后面所跟的值ending,done属性值为true,表示遍历已经结束。
第四次以及后面在调用.next()方法,返回的都会是{value: undefined, done: true }。
由Generator函数返回的遍历器对象,只有调用.next()方法才会遍历到下一个内部状态,所以这其实是提供了一种可以暂停执行的函数,yield表达式就是暂停标志。
遍历器对象的.next()方法的运行逻辑如下。
值得注意的是:
// 出现在普通函数中,报错
(function () {
yield 'hello';
})()
// forEach不是Generator函数,报错
[1, 2, 3, 4, 5].forEach(val => {
yield val
});
function* step() {
yield 'step1';
// 下面的yield后面的表达式不会立即求值,
// 只有暂停到这一行时,才会计算表达式的值。
yield 'step' + 2;
yield 'setp3';
return 'end';
}
function* gen() {
for (let i = 0; i < 5; i++) {
let res = yield; // yield表达式本身没有返回值
console.log(res); // undefined
}
}
let g = gen();
g.next(); // {value: 0, done: false}
g.next(); // {value: 1, done: false}
g.next(); // {value: 2, done: false}
yield与return的异同:
相同点:
不同点:
前面我们说到过,yield表达式自身没有返回值,或者说返回值永远是undefined。但是,我们可以通过给.next()方法传入一个参数,来设置上一个(是上一个)yield表达式返回值。
来看一个例子:
function* conoleNum() {
console.log('Started');
console.log(`data: ${yield}`);
console.log(`data: ${yield}`);
return 'Ending';
}
let g = conoleNum();
g.next(); // 控制台输出:'Started'
g.next('a'); // 控制台输出:'data: a'
// 不传入参数'a',就会输出'data: undefined'
g.next('b'); // 控制台输出:'data: b'
// 不传入参数'a',就会输出'data: undefined'
上面的例子,需要强调一个不易理解的地方。
第一次调用.next(),此时函数暂停在代码第三行的yield表达式处。记得吗?yield会暂停函数执行,此时打印它的console.log(),也就是代码第三行的console,由于暂停并没有被执行,所以不会打印出结果,只输出了代码第二行的'Started'。
当第二次调用.next()方法时,传入参数'a',函数暂停在代码第四行的yield语句处。此时参数'a'会被当做上一个yield表达式的返回值,也就是代码第三行的yiled表达式的返回值,所以此时控制台输出'data: a'。而代码第四行的console.log()由于暂停,没有被输出。
第三次调用,同理。所以输出'data: b'。
Generator函数返回的遍历器对象,都有一个.throw()方法,可以在函数体外抛出错误,然后在Generator函数体内捕获。
function* gen() {
try {
yield;
} catch (e) {
console.log('内部捕获', e);
}
};
var g = gen();
// 下面执行一次.next()
// 是为了让gen函数体执行进入try语句中的yield处
// 这样抛出错误,gen函数内部的catch语句才能捕获错误
g.next();
try {
g.throw('a');
g.throw('b');
} catch (e) {
console.log('外部捕获', e);
}
上面例子中,遍历器对象g在gen函数体外连续抛出两个错误。第一个错误被gen函数体内的catch语句捕获。g第二次抛出错误,由于gen函数内部的catch语句已经执行过了,不会再捕捉到这个错误了,所以这个错误就会被抛出gen函数体,被函数体外的catch语句捕获。
值得注意的是:
遍历器对象的throw方法被捕获以后,会附带执行一次.next()方法,代码执行会暂停到下一条yield表达式处。看下面这个例子:
function* gen(){
try {
yield console.log('a');
} catch (e) {
console.log(e); // 'Error'
}
yield console.log('b');
yield console.log('c');
}
var g = gen();
g.next(); // 控制台输出:'a'
g.throw('Error'); // 控制台输出:'b'
// throw的错误被内部catch语句捕获,
// 会自动在执行一次g.next()
g.next(); // 控制台输出:'c'
Generator函数返回的遍历器对象,还有一个.return()方法,可以返回给定的值,并且直接结束对遍历器对象的遍历。
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
g.next(); // { value: 1, done: false }
// 提前结束对g的遍历。尽管yield还没有执行完
// 此时done属性值为true,说明遍历结束
g.return('foo'); // { value: "foo", done: true }
g.next(); // { value: undefined, done: true }
如果.return()方法调用时,不提供参数,则返回值的value属性为undefined。
yield* 用来在一个Generator函数里面执行另一个Generator函数。
如果在一个Generator函数内部,直接调用另一个Generator函数,默认情况下是没有效果的。
function* gen1() {
yield 'a';
yield 'b';
}
function* gen2() {
yield 'x';
// 直接调用gen1()
gen1();
yield 'y';
}
// 遍历器对象可以使用for...of遍历所有状态
for (let v of gen2()){
只输出了gen1的状态
console.log(v); // 'x' 'y'
}
上面的例子中,gen1和gen2都是Generator函数,在gen2里面直接调用gen1,是不会有效果的。
这个就需要用到 yield* 表达式。
function* gen1() {
yield 'a';
yield 'b';
}
function* gen2() {
yield 'x';
// 用 yield* 调用gen1()
yield* gen1();
yield 'y';
}
for (let v of gen2()){
输出了gen1、gen2的状态
console.log(v); // 'x' 'a' 'b' 'y'
}
本文主要讲解Generator函数的基本语法和一些细节,Generator函数的定义、yield表达式、.next()方法及传参、.throw()方法、.return()方法以及 yield* 表达式。
文章开头讲到,Generator函数时ES6提出的异步编程的一种解决方案。在实际应用中,一般在yield关键字后面会跟随一个异步操作,当异步操作成功返回后调用.next()方法,将异步流程交给下一个yield表达式。具体关于Generator函数的异步应用,大家可以参考阮一峰老师的这篇文章,或参考其他网上资料,继续深入学习。
Generator与async function都是返回一个特定类型的对象:Generator: 一个类似{ value: XXX, done: true }这样结构的Object,Async: 始终返回一个Promise,使用await或者.then()来获取返回值
由于Generator可以暂停函数执行,返回任意表达式的值,这使得 Generator有多种应用场景,这篇文章简单整理一些Generator的使用场景:异步操作的同步化表达、控制流管理、部署 Iterator 接口、作为数据结构
Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。
es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢?thunk函数 将函数替换成一个只接受回调函数作为参数的单参数函数
状态机,封装了多个内部状态;返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态;带*号,yeild表达式定义不同的内部状态;调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果
最近,为了更好地理解Redux Sagas的工作原理,我重学了JavaScript generators的知识,我把从网上收集到的各种知识点浓缩到一篇文章里,我希望这篇文章既通俗易懂,又足够严谨,可以作为初学者的generators使用指南。
实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字
虽然现在使用 async 函数 就可以替代 Generator 执行器了,不过了解下 Generator 执行器的原理还是挺有必要的。如果你不了解 Generator,那么你需要看这里。
这是一只会说话的猫的一些代码,可能是当今互联网上最重要的一种应用。它看起来有点像一个函数,对吗?这被称为生成器-函数,它与函数有很多共同之处。但你马上就能看到两个不同之处。
可以把生成器看作一个值的生产者,我们通过迭代器接口的next 调用一次提取出一个值,所以严格来讲,生成器本身并不是 iterrable,尽管执行一个生成器就得到了一个迭代器
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!