ES6 生成器（Generator）

ES6 生成器（Generator）

什么是生成器？

生成器就是通过构造函数Generator创造出来的对象，生成器既是一个迭代器，同时也是一个可迭代对象

基本用法

基本语法：

	function* myGenerator() {
	  yield 'one';
	  yield 'two';
	  return 'three';
	}
	
	var g = myGenerator();
	
	g.next(); // { value: 'one', done: false }
	g.next(); // { value: 'two', done: false }
	g.next(); // { value: 'three', done: true }
	g.next(); // { value: undefined, done: true }

分析Generator的执行过程：

1. 第一次调用，Generator函数开始执行，直到遇到第一个yield表达式为止
2. 第二次调用，Generator函数从上次yield表达式停下的地方，一直执行到下一个yield表达式
3. 第n-1次调用，Generator函数从上次yield表达式停下的地方，一直执行到return语句（如果没有return语句，就执行到函数结束）
4. 第n次调用，Generator函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true

注意：

• JavaScript中的Generator只有调用next时才执行当前yield的代码
• yield只能出现的Generator函数里面，不然会报错
• next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值
• yield表达式如果用在另一个表达式之中，必须放在圆括号里面console.log(‘Hello’ + (yield 123))
• for…of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法

生成器相关操作

• Generator.prototype.throw([new Error()])：在函数体外抛出错误，然后在Generator函数体内(try…catch)捕获
• Generator.prototype.return(value)：返回给定的值，并结束遍历 Generator 函数
• yield* 表达式：在一个Generator函数里面执行另一个Generator函数
• 让Generator函数恢复执行，并且使用不同的语句替换yield表达式：
  • next()是将yield表达式替换成一个值
  • throw()是将yield表达式替换成一个throw语句
  • return()是将yield表达式替换成一个return语句

斐波那契数列

 	function *creatrFeribo(){
            let prop1 = 1;
            let prop2 = 1;
            let n = 1;
            while(true){
                if(n <= 2){
                    yield 1
                }else{
                    const newValue = prop1 + prop2;
                    yield newValue;
                    prop2 = prop1;
                    prop1 = newValue;
                }
                n++;
            }
        }
        const gen = creatrFeribo()

对象中的Generator

	let obj = {
	    * Generator1(){
	        yield 1;
	    },
	    Generator2 : function* (){
	        yield 2;
	    }
	}

Generator函数实例化对象是无法使用this的，可以通过call来实现：

	function* Fun() {
	  this.a = 1;
	  yield this.b = 2;
	  yield this.c = 3;
	}
	var f = Fun.call(Fun.prototype);
	
	f.next();  // Object {value: 2, done: false}
	f.next();  // Object {value: 3, done: false}
	f.next();  // Object {value: undefined, done: true}
	
	f.a // 1
	f.b // 2
	f.c // 3

还可以将Generator函数调用方式改为构造函数：

	function* gen() {
	  this.a = 1;
	  yield this.b = 2;
	  yield this.c = 3;
	}
	function Fun() {
	  return gen.call(gen.prototype);
	}
	
	var f = new Fun();
	
	f.next();  // Object {value: 2, done: false}
	f.next();  // Object {value: 3, done: false}
	f.next();  // Object {value: undefined, done: true}
	
	f.a // 1
	f.b // 2
	f.c // 3