学习链接

Generator 函数的语法

Generator 函数的异步应用

进程、线程、协程、例程、过程的区别是什么？

异步操作-Generator

Promise 的最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。

异步编程（多任务）的一种解决方案——“协程”（coroutine），意思是多个线程互相协作，完成异步任务。

协程有点像函数，又有点像线程。它的运行流程大致如下。

  • 第一步，协程 A 开始执行。
  • 第二步，协程 A 执行到一半，进入暂停，执行权转移到协程B。
  • 第三步，（一段时间后）协程 B 交还执行权。
  • 第四步，协程 A 恢复执行。

上面流程的协程 A，就是异步任务，因为它分成两段（或多段）执行。

Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。

虽然 Generator 函数将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。

Thunk 函数

“求值策略”，即函数的参数到底应该何时求值。

  1. var x = 1;
  3. function f(m) {
  4.     return m * 2;
  5. }
  7. f(x + 5)
  • 传值调用：即在进入函数体之前，就计算 x + 5 的值（等于 6），再将这个值传入函数f。
    1. f(x + 5) => f(6)
  • 传名调用：即直接将表达式 x + 5 传入函数体，只在用到它的时候求值。
    1. f(x + 5) => (x + 5) * 2

编译器的“传名调用”实现，往往是将参数放到一个临时函数之中，再将这个临时函数传入函数体。这个临时函数就叫做 Thunk 函数。

Thunk 函数是“传名调用”的一种实现策略，用来替换某个表达式。

可用于自动执行 Generator 函数。

  1. function thunkify(fn) {
  2.     return function (...args) {
  3.         const ctx = this;
  5.         return function (done) {
  6.             let called;
  8.             args.push(function () {
  9.                 if (called) return;
  10.                 called = true;
  11.                 done.apply(null, arguments);
  12.             });
  14.             try {
  15.                 fn.apply(ctx, args);
  16.             } catch (err) {
  17.                 done(err);
  18.             }
  19.         }
  20.     }
  21. };

手动流程管理

  1. const readFileThunk = thunkify(fs.readFile);
  3. const gen = function* (){
  4.     var r1 = yield readFileThunk('fileA');
  5.     console.log(r1.toString());
  6.     var r2 = yield readFileThunk('fileB');
  7.     console.log(r2.toString());
  8. };
  10. const g = gen();
  12. let r1 = g.next();
  13. r1.value(function (err, data) {
  14.     if (err) throw err;
  15.     let r2 = g.next(data);
  16.     r2.value(function (err, data) {
  17.         if (err) throw err;
  18.         g.next(data);
  19.     });
  20. });

自动流程管理

  1. const readFileThunk = thunkify(fs.readFile);
  3. function run(fn) {
  4.     const gen = fn();
  6.     function next(err, data) {
  7.         const result = gen.next(data);
  8.         if (result.done) return;
  9.         result.value(next);
  10.     }
  12.     next();
  13. }
  15. function* g() {
  16.     let f1 = yield readFileThunk('fileA');
  17.     let f2 = yield readFileThunk('fileB');
  18.     // ...
  19.     let fn = yield readFileThunk('fileN');
  20. }
  22. run(g);

Thunk 函数并不是 Generator 函数自动执行的唯一方案。

因为自动执行的关键是，必须有一种机制，自动控制 Generator 函数的流程，接收和交还程序的执行权。回调函数可以做到这一点，Promise 对象也可以做到这一点。

co 模块

基于 Thunk 和 Promise。

  1. // 接受 Generator 函数作为参数，返回 Promise 对象
  2. function co(gen) {
  3.     const ctx = this;
  5.     return new Promise(function(resolve, reject) {
  6.         // 先检查参数gen是否为 Generator 函数
  7.         // 如果是，则执行该函数 得到一内部指针对象
  8.         if (typeof gen === 'function') gen = gen.call(ctx);
  9.         // 如果不是，则返回 Promised 对象
  10.         if (!gen || typeof gen.next !== 'function') return resolve(gen);
  12.         onFulfilled();
  13.         // 将 Generator 函数的内部指针对象的 next 方法包装成 onFulfilled 函数
  14.         function onFulfilled(res) {
  15.             let ret;
  16.             try {
  17.                 ret = gen.next(res);
  18.             } catch (e) {
  19.                 return reject(e);
  20.             }
  21.             next(ret);
  22.         }
  23.     });
  24. }
  27. function next(ret) {
  28.     // 当前是否为 Generator 函数的最后一步
  29.     if (ret.done) {
  30.         return resolve(ret.value);
  31.     }
  32.     // 确保每一步的返回值都是 Promise 对象
  33.     let value = toPromise.call(ctx, ret.value);
  34.     // 使用then方法，为返回值加上回调函数，然后通过onFulfilled函数再次调用next函数
  35.     if (value && isPromise(value)) {
  36.         return value.then(onFulfilled, onRejected);
  37.     }
  38.     // 在参数不符合要求的情况下（参数非 Thunk 函数和 Promise 对象）
  39.     // 将 Promise 对象的状态改为rejected，从而终止执行
  40.     return onRejected(
  41.         new TypeError(
  42.             'You may only yield a function, promise, generator, array, or object, '
  43.             + 'but the following object was passed: "'
  44.             + String(ret.value)
  45.             + '"'
  46.         )
  47.     );
  48. }

Generator 与协程

异步操作-Generator - 图1

Generator 与上下文

异步操作-Generator - 图2

语法

语法简介

异步操作-Generator - 图3

  1. // 惰性求值
  2. function* gen() {
  3.     yield  123 + 456;
  4. }
  5. //  暂缓执行
  6. function* f() {
  7.     console.log('执行了！')
  8. }
  9. var generator = f();
  10. setTimeout(function () {
  11.     generator.next()
  12. }, 2000);
  1. var arr = [1, [[2, 3], 4], [5, 6]];
  3. var flat = function* (a) {
  4.     a.forEach(function (item) {
  5.         if (typeof item !== 'number') {
  6.             yield* flat(item); // Uncaught SyntaxError: Unexpected identifier 
  7.         } else {
  8.             yield item; // Uncaught SyntaxError: Unexpected identifier 
  9.         }
  10.     });
  11. };
  13. for (var f of flat(arr)){
  14.     console.log(f);
  15. }
  1. function* demo() {
  2.     console.log('Hello' + yield); // SyntaxError
  3.     console.log('Hello' + yield 123); // SyntaxError
  5.     console.log('Hello' + (yield)); // OK
  6.     console.log('Hello' + (yield 123)); // OK
  7. }
  1. function* demo() {
  2.     foo(yield 'a', yield 'b'); // OK
  3.     let input = yield; // OK
  4.     }
  6. function* gen(x){
  7.     var y = yield x + 2;
  8.     // 等价于 yield (x + 2)
  9.     return y;
  10. }
  12. var g = gen(1);
  13. g.next() // { value: 3, done: false }
  14. g.next(2) // { value: 2, done: true }
  1. function* gen(){
  2.     // some code
  3. }
  5. var g = gen();
  7. g[Symbol.iterator]() === g
  8. // true

next 方法的参数

异步操作-Generator - 图4

  1. // 注意：执行了 yield 表达式后就暂停了, 表达式并未返回值
  2. // yield 表达式的返回值由下一次的 next 的参数决定
  3. // 故第二次调用 next 才输出 1.a
  5. function* dataConsumer() {
  6.     console.log('Started');
  7.     console.log('1. ' + yield);
  8.       console.log('2. ' + yield);
  9.     return 'result';
  10. }
  12. let genObj = dataConsumer();
  13. genObj.next();
  14. // Started
  15. genObj.next('a')
  16. // 1. a
  17. genObj.next('b')
  18. // 2. b

for…of 循环

异步操作-Generator - 图5

  1. function* foo() {
  2.     yield 1;
  3.     yield 2;
  4.     yield 3;
  5.     yield 4;
  6.     yield 5;
  7.     return 6;
  8. }
  10. for (let v of foo()) {
  11.     console.log(v);
  12. }
  13. // 1 2 3 4 5
  1. // 不修改原生对象，捏造一个新接口
  2. function* objectEntries(obj) {
  3.     let propKeys = Reflect.ownKeys(obj);
  5.     for (let propKey of propKeys) {
  6.         yield [propKey, obj[propKey]];
  7.     }
  8. }
  10. let jane = { first: 'Jane', last: 'Doe' };
  12. for (let [key, value] of objectEntries(jane)) {
  13.     console.log(`${key}: ${value}`);
  14. }
  15. // first: Jane
  16. // last: Doe
  1. // 直接给对象 Symbol.iterator 赋值
  2. function* objectEntries() {
  3.     let propKeys = Object.keys(this);
  5.     for (let propKey of propKeys) {
  6.         yield [propKey, this[propKey]];
  7.     }
  8. }
  10. let jane = { first: 'Jane', last: 'Doe' };
  12. jane[Symbol.iterator] = objectEntries;
  14. for (let [key, value] of jane) {
  15.     console.log(`${key}: ${value}`);
  16. }
  17. // first: Jane
  18. // last: Doe
  1. function* numbers () {
  2.     yield 1;
  3.     yield 2;
  4.     return 3;
  5.     yield 4;
  6. }
  8. // 扩展运算符
  9. [...numbers()] // [1, 2]
  11. // Array.from 方法
  12. Array.from(numbers()) // [1, 2]
  14. // 解构赋值
  15. let [x, y] = numbers();
  16. x // 1
  17. y // 2
  19. // for...of 循环
  20. for (let n of numbers()) {
  21.     console.log(n)
  22. }
  23. // 1
  24. // 2

Generator.prototype.throw()

异步操作-Generator - 图6

  1. var g = function* () {
  2.     try {
  3.         yield;
  4.     } catch (e) {
  5.         console.log('内部捕获', e);
  6.     }
  7. };
  9. var i = g();
  10. i.next();
  12. try {
  13.     i.throw('a');
  14.     i.throw('b'); // 内部 catch 过了，传到外部
  15. } catch (e) {
  16.     console.log('外部捕获', e);
  17. }
  18. // 内部捕获 a
  19. // 外部捕获 b
  1. var gen = function* gen(){
  2.     yield console.log('hello');
  3.     yield console.log('world');
  4. }
  6. var g = gen();
  7. g.next();
  9. try {
  10.     throw new Error();
  11. } catch (e) {
  12.     g.next();
  13. }
  14. // hello
  15. // world
function* gen() {
    try {
        yield 1;
    } catch (e) {
        console.log('内部捕获');
    }
}

var g = gen();
g.throw(1);
// Uncaught 1

var gen = function* gen(){
    try {
        yield console.log('a');
    } catch (e) {
        // ...
    }
    yield console.log('b');
    yield console.log('c');
}

var g = gen();
g.next() // a
g.throw() // b
g.next() // c

Generator.prototype.return()

异步操作-Generator - 图7

function* gen() {
    yield 1;
    console.log(123)
    yield 2;
    yield 3;
}

var g = gen();

g.next()        // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }
g.return('foo 123') // { value: "foo 123", done: true }

function* numbers () {
    yield 1;
    try {
        yield 2;
        yield 3;
    } finally {
        yield 4;
        yield 5;
    }
    yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.return(8) // { value: 8, done: true }
g.next() // { value: undefined, done: true }
g.next() // { value: undefined, done: true }

function* numbers () {
    yield 1;
    try {
        yield 2;
        yield 3;
    } finally {
        yield 4;
        yield 5;
    }
    yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }

next()、throw()、return() 的共同点

异步操作-Generator - 图8

const g = function* (x, y) {
    let result = yield x + y;
    return result;
};

const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}

gen.next(1); // Object {value: 1, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = 1;

const g = function* (x, y) {
    let result = yield x + y;
    return result;
};

const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}

gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));

const g = function* (x, y) {
    let result = yield x + y;
    return result;
};

const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}

gen.return(2); // Object {value: 2, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = return 2;

yield* 表达式

异步操作-Generator - 图9

function* foo() {
    yield 'a';
    yield 'b';
}

function* bar() {
    yield 'x';
    yield* foo();
    yield 'y';
}

// 等同于
function* bar() {
    yield 'x';
    yield 'a';
    yield 'b';
    yield 'y';
}

// 等同于
function* bar() {
    yield 'x';
    for (let v of foo()) {
        yield v;
    }
    yield 'y';
}

for (let v of bar()){
    console.log(v);
}
// "x"
// "a"
// "b"
// "y"

function* foo() {
    yield 2;
    yield 3;
    return "foo";
}

function* bar() {
    yield 1;
    var v = yield* foo();
    console.log("v: " + v);
    yield 4;
}

var it = bar();

it.next()
// {value: 1, done: false}
it.next()
// {value: 2, done: false}
it.next()
// {value: 3, done: false}
it.next();
// "v: foo"
// {value: 4, done: false}
it.next()
// {value: undefined, done: true}

function* iterTree(tree) {
    if (Array.isArray(tree)) {
        for(let i = 0; i < tree.length; i++) {
            yield* iterTree(tree[i]);
        }
    } else {
        yield tree;
    }
}

const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];

[...iterTree(tree)] // ["a", "b", "c", "d", "e"]

for(let x of iterTree(tree)) {
    console.log(x);
}
// a
// b
// c
// d
// e

Generator 函数的 this

异步操作-Generator - 图10

function* g() {}

g.prototype.hello = function () {
    return 'hi!';
};

let obj = g();

obj instanceof g // true
obj.hello() // 'hi!'

function* g() {
    this.a = 11;
}

let obj = g();
obj.next();
obj.a // undefined

function* F() {
    this.a = 1;
    yield this.b = 2;
    yield this.c = 3;
}
var obj = {};
var f = F.call(obj); // 即让 this 指向 obj

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

obj.a // 1
obj.b // 2
obj.c // 3

function* gen() {
    this.a = 1;
    yield this.b = 2;
    yield this.c = 3;
}

function F() {
    return gen.call(gen.prototype); // this 指向原型
}

var f = new F();

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