每天学点ES6 —— 可暂停的函数 Generator

已发ES6文章:

概念

Generator 函数是可暂停的函数,它返回一个遍历器对象,通过遍历器对象可以继续执行。

注:一般的函数只能返回一次值,而Generator 函数可以分次返回多个值

定义和使用

类似普通函数的定义,但是需要在函数名称前加一个 * 号,函数体内使用 yield 语句定义各个暂停点。

Generator 函数使用跟普通函数一样执行,返回一个遍历器对象。

function * myGenerator(){

 yield 'a';

 yield 'b';

 return 'c';

}

var g=myGenerator();

g.next(); //{value: "a", done: false}

g.next(); //{value: "b", done: false}

g.next(); //{value: "c", done: true}

yield 语句

yield 表示暂停的意思,使用next方法执行下一条 yield 语句,直到retrun为止(没有return返回undefined)

yield 不可使用在普通函数里,Generator 函数中yield就是暂停的标识。

注:

1. yield 语句无返回值(undefined)。

2. Generator函数内部调用另一个Generator函数,需要使用 yield * 语句

Generator 函数注入值

next可以带一个参数,该参数在 Generator 内部作为上一次 yield 语句的返回值。

function * gen(x){

 let result=yield (x+1);

 return result+1;

}

let g=gen(1);

g.next(); //{value: 2, done: false}

g.next(); //{value: NaN, done: true}

//第一步yield 1+x返回值为undefined

//第二步结果是 1+undefined

//可以给next传参

let gg=gen(1);

gg.next(); //{value: 2, done: false}

gg.next(1); //{value: 2, done: false}

//第一步yield 1+x返回值为undefined

//第二步next传参被认为是第一步的返回值,即为1

注:由于第一次使用next方法,没有上一个yield语句,所有next传值无效

Generator的方法

1. throw(e)

Generator 函数内部的try catch抛出错误则会终止执行。使用throw方法可以让内部的try catch捕获错误。

function * g(x){

 try{

  yield 2;

  yield x.name;

  yield 3;

 }catch(e){

  console.log('非法值',e)

 }

};

var cc=g();

cc.next();

cc.next(); //报错 {value: undefined, done: true}

var ccc=g();

ccc.next();

ccc.throw('ss'); //非法值 ss {value: undefined, done: true}

2. return(x)

return 方法用来结束函数,x作为返回值

function * g(){

 yield 1;

 yield 2;

 yield 3;

}

var cc=g();

cc.next(); //{value: 1, done: false}

cc.return('cc'); //{value: "cc", done: true}

cc.next(); //{value: undefined, done: true}

Generator 函数中的this

Generator函数返回的是一个遍历器,且这个遍历器是Generator函数实例,但函数的this不指向构造函数本身

function * g(){

this.aaa=1;

}

var cc=g();

cc instanceof g; //true

cc.next();

cc.aaa; //undefined

window.aaa; //1

文章到这里结束,下篇 ☞ Promise

【关注一下不迷路~】

每天学点ES6 ——  可暂停的函数 Generator

【html】【css】【html】【css】【javascript】【html】【javascript】【css】【javascript】【css】


分享到:


相關文章: