ES6---Generator函数
- 一、简介
- 二、yield 表达式
- 三、next 方法的参数
- 四、for...of 循环
- 五、Generator函数异步操作的同步化表达
- 六、Generator.prototype.throw()---函数体外抛出错误
- 七、Generator.prototype.return()---返回给定的值
- 八、next()、throw()、return() 的共同点
-
- 1. next()是将yield表达式替换成一个值
- 2. throw()是将yield表达式替换成一个throw语句
- 3. return()是将yield表达式替换成一个return语句
- 九、yield* 表达式---Generator函数嵌套
- 十、Generator 函数的this
- 十一、Thunk 函数
一、简介
- Generator函数是 ES6 提供的一种异步编程解决方案。
- Generator函数有多种理解角度。语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。
- 执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
- 形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
function* method(){
yield 1+1;
yield 2+2;
yield 3+3;
yield 4+4;
return 10;
}
let f=method();
console.log(f.next());
console.log(f.next());
console.log(f.next());
console.log(f.next());
console.log(f.next());
- Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
- 总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。
二、yield 表达式
- 由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
- 遍历器对象的next方法的运行逻辑如下。
- （1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
- （2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
- （3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
- （4）如果该函数没有return语句，则返回的对象的value属性值为undefined。
- 需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”的语法功能。
- yield表达式与return语句既有相似之处，也有区别。相似之处在于，都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；Generator 函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说 Generator 生成了一系列的值。
- Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。
function* f() {
console.log('执行了！')
}
var generator = f();
setTimeout(function () {
generator.next()
}, 2000);
- 函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行。
- 注意，yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。
三、next 方法的参数
- yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。
function* method(){
let x=yield 1+2;
console.log(x);
let y=yield 3+x;
console.log(y);
return y+10;
}
let met=method();
console.log(met.next());
console.log(met.next(3));
console.log(met.next(7));
function* fun(){
let x=yield 5+(yield 1+2);
return x;
}
let xf=fun();
console.log(xf.next());
console.log(xf.next(10));
console.log(xf.next(2));
function* fm(){
console.log("start");
console.log(1, `${yield}`);
console.log(2, `${yield}`);
console.log("end");
}
let f=fm();
console.log(f.next());
console.log(f.next('a'));
console.log(f.next('b'));
四、for…of 循环
- for…of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法。
function* foo(){
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
for(let i of foo()){
console.log(i);
}
- 上面使用for…of循环，依次显示 5 个yield表达式的值。注意，一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for…of循环之中。
- 利用 Generator 函数和for…of循环，实现斐波那契数列的例子。
function* fibo(){
let [prev,cur]=[0,1];
for(;;){
yield cur;
[prev,cur]=[cur,prev+cur];
}
}
for(let n of fibo()){
if(n>50)
break;
console.log(n);
}
- 利用for…of循环，可以写出遍历任意对象（object）的方法。原生的 JavaScript 对象没有遍历接口，无法使用for…of循环，通过 Generator 函数为它加上这个接口，就可以用了。
- 除了for…of循环以外，扩展运算符（…）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。
五、Generator函数异步操作的同步化表达
- Generator 可以暂停函数执行，返回任意表达式的值。这种特点使得 Generator 有多种应用场景。
- Generator 函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用next方法时再执行。所以，Generator 函数的一个重要实际意义就是用来处理异步操作，改写回调函数。
- Ajax 是典型的异步操作，通过 Generator 函数部署 Ajax 操作，可以用同步的方式表达。
function Ajax(method,url,data,callback){
var http;
if(window.XMLHttpRequest){
http=new XMLHttpRequest();
}
else{
http=new ActiveXObject("Microsoft.XMLHTTP");
}
if(method=="get"){
if(data){
url+="?";
url+=data;
}
http.open(method,url);
http.send();
}
else{
http.open(method,url);
if(data){
http.send(data);
}
http.send();
}
http.onreadystatechange=function(){
if(http.readyState==4&&http.status==200){
callback(http.response);
}
}
}
function* requCity(){
let result=yield Ajax('get','./city.json',null,function(res){
console.log(aja.next(res));
})
let json=JSON.parse(result);
return json;
}
let aja=requCity();
aja.next();
- 上面代码的requCity函数，就是通过 Ajax 操作获取数据。可以看到，除了多了一个yield，它几乎与同步操作的写法完全一样。注意，函数中的next方法，必须加上res参数，因为yield表达式，本身是没有值的，总是等于undefined。
六、Generator.prototype.throw()—函数体外抛出错误
- a. Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。
var g=function* (){
try{
yield;
}
catch(e){
console.log('内部捕获', e);
}
};
var i=g();
i.next();
try{
i.throw('a');
i.throw('b');
}
catch(e){
console.log('外部捕获', e);
}
- 遍历器对象i连续抛出两个错误。第一个错误被 Generator 函数体内的catch语句捕获。i第二次抛出错误，由于 Generator 函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以这个错误就被抛出了 Generator 函数体，被函数体外的catch语句捕获。
- b. throw方法可以接受一个参数，该参数会被catch语句接收，建议抛出Error对象的实例。
function* method(){
try{
yield 1+2;
yield 2+3;
yield 3+4;
}
catch(e){
console.log(e.message);
}
}
let m=method();
console.log(m.next());
m.throw(new Error("出错了"));
- 注意，不要混淆遍历器对象的throw方法和全局的throw命令。上面代码的错误，是用遍历器对象的throw方法抛出的，而不是用throw命令抛出的。后者只能被函数体外的catch语句捕获。
var g=function*(){
while(true){
try{
yield;
}
catch(e){
if(e!='a')
throw e;
}
}
};
var i=g();
i.next();
try{
throw new Error('a');
throw new Error('b');
}
catch(e){
console.log('外部捕获', e);
}
- 之所以只捕获了a，是因为函数体外的catch语句块，捕获了抛出的a错误以后，就不会再继续try代码块里面剩余的语句了。
- c. 如果 Generator 函数内部没有部署try…catch代码块，那么throw方法抛出的错误，将被外部try…catch代码块捕获。
var g=function*(){
while(true){
yield;
console.log('内部捕获', e);
}
};
var i=g();
i.next();
try{
i.throw('a');
i.throw('b');
}
catch(e){
console.log('外部捕获', e);
}
- Generator 函数g内部没有部署try…catch代码块，所以抛出的错误直接被外部catch代码块捕获。
- d. 如果 Generator 函数内部和外部，都没有部署try…catch代码块，那么程序将报错，直接中断执行。
var gen = function* gen(){
yield console.log('hello');
yield console.log('world');
}
var g = gen();
g.next();
g.throw();
- g.throw抛出错误以后，没有任何try…catch代码块可以捕获这个错误，导致程序报错，中断执行。
- 注意：throw方法抛出的错误要被内部捕获，前提是必须至少执行过一次next方法。throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next方法。
七、Generator.prototype.return()—返回给定的值
- Generator 函数返回的遍历器对象，还有一个return()方法，可以返回给定的值，并且终结遍历 Generator 函数。
let fun=function*(){
yield 1;
yield 2;
yield 3;
yield 4;
}
let f=fun();
console.log(f.next());
console.log(f.next());
console.log(f.return('123'));{value: "123", done: true}
console.log(f.next());
console.log(f.next());
console.log(f.next());
- 遍历器对象f调用return()方法后，返回值的value属性就是return()方法的参数true。并且，Generator 函数的遍历就终止了，返回值的done属性为true，以后再调用next()方法，done属性总是返回true。
- 如果return()方法调用时，不提供参数，则返回值的value属性为undefined。
function* method(){
yield 1;
yield 2;
yield 3;
}
var m=method();
console.log(m.next());
console.log(m.return());
- 如果 Generator 函数内部有try…finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束。
function* numbers(){
yield 1;
try{
yield 2;
yield 3;
yield 4;
}
finally{
yield 5;
yield 6;
}
yield 7;
}
var g=numbers();
console.log(g.next());
console.log(g.next());
console.log(g.return(8));
console.log(g.next());
console.log(g.next());
- 调用return()方法后，就开始执行finally代码块，不执行try里面剩下的代码了，然后等到finally代码块执行完，再返回return()方法指定的返回值。
八、next()、throw()、return() 的共同点
1. next()是将yield表达式替换成一个值
const g=function* (x,y){
let result=yield x+y;
return result;
};
const gen=g(1,2);
console.log(gen.next());
console.log(gen.next(1));
- 第二个next(1)方法就相当于将yield表达式替换成一个值1。如果next方法没有参数，就相当于替换成undefined。
2. throw()是将yield表达式替换成一个throw语句
const g=function* (x,y){
let result=yield x+y;
return result;
};
const gen=g(1,2);
console.log(gen.next());
console.log(gen.next(1));
gen.throw(new Error('出错了'));
3. return()是将yield表达式替换成一个return语句
const g=function* (x,y){
let result=yield x+y;
return result;
};
const gen=g(1,2);
console.log(gen.next());
console.log(gen.next(1));
console.log(gen.return(2));
九、yield* 表达式—Generator函数嵌套
- a. 如果yield表达式后面跟的是一个遍历器对象，需要在yield表达式后面加上星号，表明它返回的是一个遍历器对象。这被称为yield*表达式。
let a=function* (){
yield 'a';
yield 'b';
}
let b=function *(){
yield 1;
yield* a();
yield 2;
}
let bf=b();
console.log(bf.next());
console.log(bf.next());
console.log(bf.next());
console.log(bf.next());
console.log(bf.next());
- yield* 后面的 Generator 函数（没有return语句时），等同于在 Generator 函数内部，部署一个for…of循环。
- yield* 后面的 Generator 函数（没有return语句时），不过是for…of的一种简写形式，完全可以用后者替代前者。反之，在有return语句时，则需要用var value = yield* iterator的形式获取return语句的值。
- b. 如果yield*后面跟着一个数组，由于数组原生支持遍历器，因此就会遍历数组成员。
function* gen(){
yield* ["a","b","c"];
}
let g=gen();
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());
- yield命令后面如果不加星号，返回的是整个数组，加了星号就表示返回的是数组的遍历器对象。
c. 任何数据结构只要有 Iterator 接口，就可以被yield*遍历。
let read=(function* (){
yield 'hello';
yield* 'hello';
})();
console.log(read.next());
console.log(read.next());
console.log(read.next());
console.log(read.next());
console.log(read.next());
console.log(read.next());
console.log(read.next());
- yield表达式返回整个字符串，yield* 语句返回单个字符。因为字符串具有 Iterator 接口，所以被yield*遍历。
十、Generator 函数的this
- Generator 函数总是返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，也继承了 Generator 函数的prototype对象上的方法。
function* g(){}
g.prototype.hello=function(){
return 'hi';
};
let obj=g();
console.log(obj instanceof g);
console.log(obj.hello());
- Generator 函数g返回的遍历器obj，是g的实例，而且继承了g.prototype。但是，如果把g当作普通的构造函数，并不会生效，因为g返回的总是遍历器对象，而不是this对象。
function* g(){
this.a=11;
}
let obj=g();
console.log(obj.next());
console.log(obj.a);
- Generator 函数g在this对象上面添加了一个属性a，但是obj对象拿不到这个属性。
- Generator 函数也不能跟new命令一起用，会报错。因为不是构造函数。
- 那么怎么让 Generator 函数返回一个正常的对象实例，既可以用next方法，又可以获得正常的this？
- 首先，生成一个空对象，使用call方法绑定 Generator 函数内部的this。这样，构造函数调用以后，这个空对象就是 Generator 函数的实例对象了。
function* F(){
this.a=1;
yield this.b=2;
yield this.c=3;
}
var obj={};
var f= F.call(obj);
console.log(f.next());
console.log(f.next());
console.log(f.next());
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
- 首先是F内部的this对象绑定obj对象，然后调用它，返回一个 Iterator 对象。这个对象执行三次next方法（因为F内部有两个yield表达式），完成 F 内部所有代码的运行。这时，所有内部属性都绑定在obj对象上了，因此obj对象也就成了F的实例。
- 执行的是遍历器对象f，但是生成的对象实例是obj，有没有办法将这两个对象统一呢？
- 一个办法就是将obj换成F.prototype。
function* F(){
this.a=1;
yield this.b=2;
yield this.c=3;
}
var obj={};
var f= F.call(F.prototype);
console.log(f.next());
console.log(f.next());
console.log(f.next());
console.log(f.a);
console.log(f.b);
console.log(f.c);
function* gen(){
this.a=1;
yield this.b=2;
yield this.c=3;
}
function F(){
return gen.call(gen.prototype);
}
var f=new F();
console.log(f.next());
console.log(f.next());
console.log(f.next());
console.log(f.a);
console.log(f.b);
console.log(f.c);
十一、Thunk 函数
- Thunk 函数是自动执行 Generator 函数的一种方法。
- JS语言是传值调用，它的 Thunk 函数含义有所不同。在JS中，Thunk 函数替换的不是表达式，而是多参数函数，将其替换成一个只接受回调函数作为参数的单参数函数。
fs.readFile(fileName,callback);
var Thunk=function(fileName){
return function(callback){
return fs.readFile(fileName,callback);
};
};
var readFileThunk=Thunk(fileName);
readFileThunk(callback);
- fs模块的readFile方法是一个多参数函数，两个参数分别为文件名和回调函数。经过转换器处理，它变成了一个单参数函数，只接受回调函数作为参数。这个单参数版本，就叫做 Thunk 函数。
- 封装成一个thunk函数
const thunk = function (fileName, codeType) {
return function (callback) {
fs.readFile(fileName, codeType, callback)
}
}
const readFileThunk = thunk('data1.json', 'utf-8')
readFileThunk((err, data) => {
})
- 任何函数，只要参数有回调函数，就能写成 Thunk 函数的形式。
let button=document.createElement("button");
button.innerText="按钮";
let thunk=function (obj,type,captrue){
return function (callback){
obj.addEventListener(type,callback,captrue);
}
}
let thunkEvent=thunk(button,'click',false);
thunkEvent(function (e){
console.log(e);
});
document.body.appendChild(button);
