摘要：返回的遍歷器對(duì)象可以依次遍歷函數(shù)內(nèi)部的每一個(gè)狀態(tài)。示例內(nèi)部捕獲外部捕獲內(nèi)部捕獲外部捕獲上面代碼遍歷器對(duì)象連續(xù)拋出兩個(gè)錯(cuò)誤，第一個(gè)被函數(shù)體內(nèi)的捕獲。上面代碼中，首先執(zhí)行函數(shù)，獲取遍歷器對(duì)象，然后使用方法第二行，執(zhí)行異步任務(wù)的第一階段。

參考 來(lái)源《ecmascript6 入門(mén)》generator部分

形式上，generator函數(shù)有兩個(gè)特點(diǎn)：一是function關(guān)鍵字與函數(shù)名之間有一個(gè)＊。二是函數(shù)體內(nèi)使用yield語(yǔ)句，如下代碼。（yield在英語(yǔ)中意思就是 產(chǎn)出）

function* helloWorld(){
    yield ‘hello’;
    yield ‘world’;
    return ‘ending’;
}

var hw=helloWorld();

調(diào)用執(zhí)行，調(diào)用generator函數(shù)和調(diào)用普通函數(shù)的形式一樣，沒(méi)有區(qū)別，比如上面helloWorld()。
但是內(nèi)部的執(zhí)行與普通函數(shù)是完全不同，調(diào)用generator函數(shù)之后，該函數(shù)并不執(zhí)行，返回的也不是函數(shù)運(yùn)行結(jié)果，而是一個(gè)指向內(nèi)部狀態(tài)的指針對(duì)象，也就是遍歷器對(duì)象。也就是說(shuō)generator函數(shù)還是一個(gè)遍歷器對(duì)象生成函數(shù)。返回的遍歷器對(duì)象可以依次遍歷generator函數(shù)內(nèi)部的每一個(gè)狀態(tài)。

它是怎么遍歷的呢？。遍歷器對(duì)象每次調(diào)用next方法，內(nèi)部指針就從函數(shù)頭部或者上一次停下來(lái)的的地方開(kāi)始執(zhí)行，遇到y(tǒng)ield語(yǔ)句暫停并返回一個(gè)對(duì)象，下一次調(diào)用next，遇到下一個(gè)yield暫停并返回一個(gè)對(duì)象（對(duì)象擁有value，和done屬性）。value的值就是yield語(yǔ)句的值，done屬性表示遍歷是否結(jié)束（false沒(méi)有結(jié)束，true結(jié)束）。

上面示例代碼用調(diào)用4次next：

第一次調(diào)用next，generator函數(shù)開(kāi)始執(zhí)行，遇到第一個(gè)yield暫停，并且返回一個(gè)對(duì)象，value ＝hello，done＝false表示還遍歷還沒(méi)有結(jié)束。

第二次調(diào)用next，從上次暫停的位置開(kāi)始執(zhí)行，遇到下一個(gè)yield暫停，并返回一個(gè)對(duì)象。。

第三次調(diào)用next，返回value為return的值，done為true表示遍歷結(jié)束。

第四次調(diào)用next，generator函數(shù)已經(jīng)運(yùn)行完畢，返回value為undefined，done為true。

yield語(yǔ)句與return語(yǔ)句既有相似之處 ，也有區(qū)別。相似之處在于都可以返回緊跟在其后邊的表達(dá)式的值。區(qū)別在于每次遇到y(tǒng)ield，函數(shù)暫停，下一次在從該位置向后執(zhí)行，而return語(yǔ)句沒(méi)有此位置記憶功能，一個(gè)函數(shù)里面只能執(zhí)行一次，而yield正因?yàn)榭梢杂卸鄠€(gè)，可以返回多個(gè)值，所以generator函數(shù)可以返回一系列的值，這也就是它名稱(chēng)的來(lái)歷（generator英語(yǔ)意思為生成器）

任意一個(gè)對(duì)象的iterator接口都是部署在了Symbol.iterator屬性，由于generator函數(shù)就是遍歷器生成函數(shù)，所以可以直接把它賦值給Symbol.iterator，從而使的該對(duì)象具有Iterator接口。

示例：

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

說(shuō)明：代碼中generator函數(shù)賦給了myIterable對(duì)象的Symbol.iterator屬性，使的該對(duì)象具有iterator接口，可以 被(…)運(yùn)算符遍歷。為什么是這樣？（…）三個(gè)點(diǎn)這里叫做擴(kuò)展運(yùn)算符，它的執(zhí)行是調(diào)用了遍歷器方法（它可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分割的序列，可以用于函數(shù)調(diào)用傳參），這里就是generator函數(shù)，然后返回一個(gè)遍歷器對(duì)象，然后重復(fù)調(diào)用它的next方法。其實(shí)不只有擴(kuò)展運(yùn)算符，for..of循環(huán)的執(zhí)行也是調(diào)用的iterator接口方法，也就是說(shuō)只有部署了iterator接口的數(shù)據(jù)集合才可以使用for...of，擴(kuò)展運(yùn)算符遍歷。

Generator函數(shù)返回的遍歷器對(duì)象，都有一個(gè)throw方法，可以在函數(shù)體外拋出錯(cuò)誤，然后在Generator函數(shù)體內(nèi)捕獲。

示例：

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log("內(nèi)部捕獲", e);
  }
};

var i = g();
i.next();

try {
  i.throw("a");
  i.throw("b");
} catch (e) {
  console.log("外部捕獲", e);
}
// 內(nèi)部捕獲 a
// 外部捕獲 b

上面代碼遍歷器對(duì)象連續(xù)拋出兩個(gè)錯(cuò)誤，第一個(gè)被generator函數(shù)體內(nèi)的catch捕獲。第二個(gè)由于generator函數(shù)體內(nèi)的catch已經(jīng)執(zhí)行過(guò)了，所以被外面的catch捕獲。如果generator函數(shù)體內(nèi)沒(méi)有try...catch...語(yǔ)句，那么就會(huì)被外面的catch語(yǔ)句捕獲。如果都沒(méi)有try...catch...，那么程序報(bào)錯(cuò)。

5.Generator.prototype.return()

如果在 Generator 函數(shù)內(nèi)部，調(diào)用另一個(gè) Generator 函數(shù)，默認(rèn)情況下是沒(méi)有效果的。yield*語(yǔ)句可以用來(lái)在一個(gè) Generator 函數(shù)里面執(zhí)行另一個(gè) Generator 函數(shù)。

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"

從語(yǔ)法角度看，如果yield命令后面跟的是一個(gè)遍歷器對(duì)象，需要在yield命令后面加上星號(hào)，表明它返回的是一個(gè)遍歷器對(duì)象。這被稱(chēng)為yield*語(yǔ)句。

let delegatedIterator = (function* () {
  yield "Hello!";
  yield "Bye!";
}());

let delegatingIterator = (function* () {
  yield "Greetings!";
  yield* delegatedIterator;
  yield "Ok, bye.";
}());

for(let value of delegatingIterator) {
  console.log(value);
}
// "Greetings!
// "Hello!"
// "Bye!"
// "Ok, bye.”

yield*后面的Generator函數(shù)（沒(méi)有return語(yǔ)句時(shí)），等同于在Generator函數(shù)內(nèi)部，部署一個(gè)for...of循環(huán)。

function* concat(iter1, iter2) {
  yield* iter1;
  yield* iter2;
}

// 等同于

function* concat(iter1, iter2) {
  for (var value of iter1) {
    yield value;
  }
  for (var value of iter2) {
    yield value;
  }
}

上面代碼，yield* 執(zhí)行的是一個(gè)遍歷器，for...of...循環(huán)的也是一個(gè)遍歷器，所以for...of...返回yield value時(shí)等同于yield*。

兩個(gè)平常會(huì)用到的示例：

1）遍歷嵌套的數(shù)組：

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"] ];

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

2）對(duì)于狀態(tài)的控制：

var clock = function*() {
  while (true) {
    console.log("Tick!");
    yield;
    console.log("Tock!");
    yield;
  }
};

如果一個(gè)對(duì)象的屬性是**Generator**函數(shù)，可以簡(jiǎn)寫(xiě)成下面的形式

let obj = {
  * myGeneratorMethod() {
    ···
  }
};

等同于

let obj = {
  myGeneratorMethod: function* () {
    // ···
  }
};

Generator函數(shù)總是返回一個(gè)遍歷器，ES6規(guī)定這個(gè)遍歷器是Generator函數(shù)的實(shí)例，也繼承了Generator函數(shù)的prototype對(duì)象上的方法。

function* g() {}

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

let obj = g();

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

上面代碼表明，Generator函數(shù)g返回的遍歷器obj，是g的實(shí)例，而且繼承了g.prototype。但是，如果把g當(dāng)作普通的構(gòu)造函數(shù)，并不會(huì)生效，因?yàn)間返回的總是遍歷器對(duì)象，而不是this對(duì)象。所以如果在generator函數(shù)內(nèi)使用this，obj對(duì)象訪問(wèn)不到。

那么，有沒(méi)有辦法讓Generator函數(shù)返回一個(gè)正常的對(duì)象實(shí)例，既可以用next方法，又可以獲得正常的this？

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var f = F.call(F.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

上面代碼：首先使用call函數(shù)將F函數(shù)的this綁定到F.prototype；而f還是那個(gè)遍歷器對(duì)象是F函數(shù)的實(shí)例，又可以繼承F.prototype的屬性，所以也就可以訪問(wèn)F.prototype代表的this的屬性了。

generator函數(shù)最大的作用可以用作異步任務(wù)的封裝（由于它的yield命令特性，可以暫停和恢復(fù)執(zhí)行）。而之前javascript對(duì)于異步的實(shí)現(xiàn)主要就是 回調(diào)函數(shù)，事件監(jiān)聽(tīng)，promise等。

示例：

var fetch = require("node-fetch");

function* gen(){
  var url = "https://api.github.com/users/github";
  var result = yield fetch(url);
  console.log(result.bio);
}

上面代碼中，Generator 函數(shù)封裝了一個(gè)異步操作，該操作先讀取一個(gè)遠(yuǎn)程接口，然后從 JSON 格式的數(shù)據(jù)解析信息。就像前面說(shuō)過(guò)的，這段代碼非常像同步操作，除了加上了yield命令。

var g = gen();
var result = g.next();

result.value.then(function(data){
  return data.json();
}).then(function(data){
  g.next(data);
});

上面代碼中，首先執(zhí)行 Generator 函數(shù)，獲取遍歷器對(duì)象，然后使用next方法（第二行），執(zhí)行異步任務(wù)的第一階段。由于Fetch模塊返回的是一個(gè) Promise 對(duì)象，而這個(gè)對(duì)象被yield返回到了它的value屬性中，因此要用.value.then方法調(diào)用then方法。成功后 return數(shù)據(jù)參數(shù)data可以被第二個(gè)then方法中接受。而第二次調(diào)用then方法傳入的data又傳回了gen函數(shù)給了變量result。value往出傳值，next可以往里傳值。