ES6 中的生成器函数介绍

发表于 5年以前 | 总阅读数：1532 次

今天介绍的是 ES6 中的生成器函数（generator function），目前浏览器中只有 Chrome 29+ 支持它，不过还是先要在 about:flags 中「启用实验性JavaScript（Enable Experimental JavaScript ）」。需要注意的是，Firefox 很早就提供了类似功能，但它实现的是 ES4 语法，最后会介绍。

定义生成器函数

在 ES6 中定义一个生成器函数很简单，在 function 后跟上「*」即可：


function* foo1() { };

    function *foo2() { };
    function * foo3() { };

    foo1.toString(); // "function* foo1() { }"
    foo2.toString(); // "function* foo2() { }"
    foo3.toString(); // "function* foo3() { }"
    foo1.constructor; // function GeneratorFunction() { [native code] }

调用生成器函数会产生一个生成器（generator）。生成器拥有的最重要的方法是 next()，用来迭代：


function* foo() { };

    var bar = foo();
    bar.next(); // Object {value: undefined, done: true}

上面第 2 行的语句看上去是函数调用，但这时候函数代码并没有执行；一直要等到第 3 行调用 next 方法才会执行。next 方法返回一个拥有 value 和 done 两个字段的对象。

生成器函数通常和 yield 关键字同时使用。函数执行到每个 yield 时都会中断并返回 yield 的右值（通过 next 方法返回对象中的 value 字段）。下次调用 next，函数会从 yield 的下一个语句继续执行。等到整个函数执行完，next 方法返回的 done 字段会变成 true。下面看一个简单的例子：


function* list() {

        for(var i = 0; i < arguments.length; i++) {
            yield arguments[i];
        }
        return "done.";
    }

    var o = list(1, 2, 3);
    o.next(); // Object {value: 1, done: false}
    o.next(); // Object {value: 2, done: false}
    o.next(); // Object {value: 3, done: false}
    o.next(); // Object {value: "done.", done: true}
    o.next(); // Error: Generator has already finished

可以看到，每次调用 next 方法，都会得到当前 yield 的值。函数执行完之后，再调用 next 方法会产生异常。

斐波那契数列

在其它语言中，生成器函数和 yield 通常会被用来演示生成斐波那契数列（前两个数字都是 1 ，除此之外任何数字都是前两个数之和的数列）。下面是 JavaScript 的生成器函数版本：


function* fab(max) {

        var count = 0, last = 0, current = 1;

        while(max > count++) {
            yield current;
            var tmp = current;
            current += last;
            last = tmp;
        }
    }

    var o = fab(10), ret, result = [];

    while(!(ret = o.next()).done) {
        result.push(ret.value);
    }

    console.log(result); // [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

代码一目了然，不多解释了。相比常见的递归实现，用生成器函数来产生斐波那契数列既高效又直观。

结合 Promise 使用

我之前写过一篇《异步编程：when.js 快速上手》，介绍了 Promise 编程的一些基础知识，没看过的同学可以点过去看完再回来。实际上，生成器函数可以很好的跟 Promise 规范结合起来完成异步编程。直接看例子（在浏览器中预览）：


var getData = function() {

        var deferred = Q.defer();

        $.getJSON(api, function(data){
            deferred.resolve(data[0]);
        });

        return deferred.promise;
    }

    var getImg = function(src) {
        var deferred = Q.defer();

        var img = new Image();

        img.onload = function() {
            deferred.resolve(img);
        };

        img.src = src;

        return deferred.promise;
    }

    var showImg = function(img) {
        $(img).appendTo($('#container'));
    }

    var all = Q.async(function* () {
        var src = yield getData();
        var img = yield getImg(src);
        showImg(img);
    });

    all();

前三个函数跟我之前那篇文章里唯一不同的地方是：when.js 换成了 Q，因为 Q 框架的 async 方法支持生成器函数。关键代码在最后几行，Q.async 收到生成器函数，先在内部产生一个生成器；再调用生成器的 next() 方法，得到类似这样的返回值： {'value' : promise / value, 'done' : true / false} ；如果 value 是 promise，Q 会把它放在 when 函数里执行。Q.async 内部每个 promise 在 resolve 时都会调用生成器的 next 方法，直到整个生成器执行完成。

最后

在其它语言中，一般都有方便的迭代器语法，自动调用生成器的 next 方法。例如下面是 Python 的「for ... in」：


def fab(max):

        count, last, current = 0, 0, 1 
        while count < max: 
            yield current
            last, current = current, last + current 
            count = count + 1

    for n in fab(10):
        print(n)

ES6 也规定了类似的语法「for ... of」用来迭代，现阶段的 ~~Chrome 并不支持~~（已经支持），Firefox 却支持。看一个只能运行在 Firefox 下的例子（再次说明：现阶段 Firefox 的生成器函数未按 ES6 规范实现）：


function fab(max) {

        var count = 0, last = 0, current = 1;

        while(count++ < max) {
            yield current;
            var tmp = current;
            current += last;
            last = tmp;
        }
    }

    for(var i of fab(10)) {
        console.log(i);
    }

参考：