提醒：本文最後更新於 1939 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

今天介紹的是 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);
}

參考：

--EOF--

提醒：本文最後更新於 1939 天前，文中所描述的資訊可能已發生改變，請謹慎使用。