js generator

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

generator跟函数很像，定义如下：

function* foo(x) {

    yield x + 1;

    yield x + 2;

    return x + 3;

}

generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。

function* fib(max) {

    var

        t,

        a = 0,

        b = 1,

        n = 1;

    while (n < max) {

        yield a;

        t = a + b;

        a = b;

        b = t;

        n ++;

    }

    return a;

}

fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

直接调用一个generator和调用函数不一样，fib(5)仅仅是创建了一个generator对象，还没有去执行它。

调用generator对象有两个方法，一是不断地调用generator对象的next()方法：

var f = fib(5);

f.next(); // {value: 0, done: false}

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

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

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

f.next(); // {value: 3, done: true}

next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。

当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。

第二个方法是直接用for ... of循环迭代generator对象，这种方式不需要我们自己判断done：

for (var x of fib(5)) {

    console.log(x); // 依次输出0, 1, 1, 2, 3

}

generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。
没有generator之前的黑暗时代，用AJAX时需要这么写代码：

ajax('http://url-1', data1, function (err, result) {

    if (err) {

        return handle(err);

    }

    ajax('http://url-2', data2, function (err, result) {

        if (err) {

            return handle(err);

        }

        ajax('http://url-3', data3, function (err, result) {

            if (err) {

                return handle(err);

            }

            return success(result);

        });

    });

});

有了generator的美好时代，用AJAX时可以这么写：

try {

    r1 = yield ajax('http://url-1', data1);

    r2 = yield ajax('http://url-2', data2);

    r3 = yield ajax('http://url-3', data3);

    success(r3);

}

catch (err) {

    handle(err);

}



看上去是同步的代码，实际执行是异步的。

巴特西

js generator

最新文章

热门文章