一文瞭解你不知道的JavaScript生成器篇

前言

在沒有JavaScript的生成器概念之前，我們幾乎普遍依賴一個假定：一個函數一旦開始執行，就會運行到結束，期間不會有其他代碼能夠打斷它並插入其間。如下代碼所示：

 var x = 1;
 function foo(){
  x++;
  bar();
  console.log("x",x);
}
 function bar(){
  x++;
}
 foo();  //x:3

不過直到ES6引入瞭一個新的函數類型，發現它並不符合這種運行到結束的特性。這類新的函數被稱為生成器。生成器的出現是我們知道原來有時代碼並不會順利的運行，可以通過暫停的方式進行異步回調，讓我們摒棄瞭此前的認知。

瞭解生成器

下面來看一段合作式並發的ES6代碼：

var x = 1;
function *foo(){
   x++;
   yield;//暫停
   console.log("x",x)
}
function bar(){
    x++;
}

可以看到使用瞭*foo的形式生成這個函數，代表生成器而非常規函數。

現在，我們要如何運行前面的代碼片段，使得bar()在*foo()內部的yield處執行呢？

步驟如下：

（1） 首先var it = foo() 構造一個迭代器it來控制這個生成器，這個迭代器會控制它的執行。

（2） 使用it.next() 啟動生成器*foo()，並運行瞭*foo()第一行的x++。

（3） *foo() 在yield語句處暫停，在這一點上使得第一個it.next()調用結束。此時*foo()仍在運行並且是活躍的，但處於暫停狀態。

（4） 此刻我們查看x的值，此時為2

（5） 然後我們調用bar(),它通過x++再次遞增x。

（6） 此刻我們再次查看x的值，此時為3。

（7） 最後再次調用it.next()調用從暫停處恢復瞭生成器*foo()的執行，並運行console.log(..)語句，這條語句使用當前的值為3.

顯然，foo()啟動瞭，但是並沒有完整運行，它在yield處暫停瞭。後面恢復瞭foo()並讓它運行到結束，但這不是必須的。

因此，生成器就是一類特殊的函數，可以一次或多次啟動和停止，並不一定非得要完成。盡管現在還不是特別清楚它的強大之處，但往後我們會看到它將成為構件以生成器作為異步流程控制的代碼模式的基礎構建之一。

對於生成器函數是一個特殊的函數這個概念，看兩個例子來更深入的理解一下：

代碼1：

function *foo(x,y){
   return x*y;
}
var it = foo(6,7);
var res = it.next();
res.value; //42

代碼2：

function *foo(x){
  var y = x *(yield);
  return y;
}
var it = foo(6);
//啟動foo()
it.next();
var res = it.next(7);
res.value //輸出什麼？

通過對比兩個代碼其實可以發現它的相似之處。我們主要分析第二個代碼。首先，傳入6作為參數x。然後調用it.next()，這會啟動foo().在foo()內部，開始執行語句var y = x…,但隨後就遇到瞭yield表達式。它很神奇的就會在這一點上暫停*foo()，並在本質上要求調用代碼為yield表達式提供一個結果值。接下來，調用it.next(7)，這一句把值傳回作為被暫停的yield表達式的結果。所以，此時的賦值語句為var y = 6 * 7，現在return這個42作為it.next(7)的結果。

實際上我們考慮的重點是這段代碼中的這兩行：

var y = x * (yield)；
return y;

這段代碼，在第一個yield這裡應該插入什麼值呢？由於第一個next()運行，使得生成器啟動並運行到此處，所以顯然他無法回答這個問題，那麼第二次next()調用回答第一個yield提出的這個問題，傳入瞭7。

註意，是第二個next回答第一個yield;

再把代碼稍微改動一下：

function *foo(x){
  var y = x *(yield “hello”);
  return y;
}
var it = foo(6);
//啟動foo()
var res = it.next();
res.value //輸出什麼？
res = it.next(7);
res.value //輸出什麼？

在第一次調用next之後，沒有傳入任何東西，res.value的值是hello，第二次向上一步暫停的yield處傳入7，於是開始瞭6*7的計算，res.value的值變為42.

這裡的每一個next都得到瞭回應。

小記：在第一次next()調用時沒有傳入任何值，此時的value就是yield後的數據，第二次向next()傳入參數之後把這個參數代入yield處。其實呢，yield和next()這一對組合起來，在生成器的執行過程中構建瞭一個雙向消息傳遞系統。我們並沒有向第一個next()調用發送值，這是有意為之，隻有暫停的yield才能接收這樣一個通過next()傳遞的值，而在生成器的起始處我們調用第一個next()時，還沒有暫停的yield來接收這樣的一個值，所以不要在第一個next()上傳遞參數。

for…of

就像ES6新增的for…of循環一樣，這意味著可以通過原生循環語法自動迭代標準迭代器：

var a = [1,3,5,7,9]
for(var v of a){
    console.log(v); //1 3 5 7 9
}

for…of循環在每次迭代中自動調用next(),他不會向next()傳入任何值，並且會在接收到done:true之後手動停止，這對於在一組數據上循環很方便。循環向a請求它的迭代器，並自動使用這個迭代器迭代遍歷a的值。

iterable(可迭代)

從ES6開始，從一個iterable中提取迭代器的方法是：iterable必須支持一個函數，其名稱是專門的ES6符號值Symbol.iterator。調用這個函數時，它會返回一個迭代器，通常每次調用會返回一個全新的迭代器，雖然這一點並不是必須的。就像前面使用for…of直接迭代的一樣，我們使用迭代器重寫：

var a = [1,3,5,7,9]
var it = a[Symbol.iterator]()
it.next().value;//1
it.next().value;//3
it.next().value;//5

生成器+promise

ES6中最完美的世界就是生成器和promise的結合。但如何實現呢？

讓我們來試一下，把支持promise的foo()和生成器*main()放在一起：

function foo(x,y){
    return request(
      "http:url/?x+y"
    )
}
function *main(){
    try{
       var text = yield foo(1,2)
       console.log(text)
    }
    catch(err){
        console.error(err)
    }
}

現在如何運行*main（）呢？還有一些實現細節需要補充，來實現接收和連接yield出來的promise，使它能夠在決議之後恢復生成器，先從手工開始實現：

var it = main()
var p = it.next().value //此時p為foo(1,2)
p.then( //等待promise的p決定成功/拒絕
  function(){
    it.next(text)
  },
  function(err){
    it.throw(err)
  }
)

這個模式下生成器yield出promise，然後其控制生成器的迭代器來執行它，直到結束，是非常強大有用的一種方法。對於ES7中，在這一方面增加語法支持的提案已經有瞭一些很強勢的支持。

async與await

function foo(){
   return request(
      "http:url/?x+y"
   )
}
async function main(){
  try{
     var text = await foo(1,2)
     console.log(text)
  }
  catch(err){
    console.log(err);
  }
}
main();

可以看到main不再被聲明為*main生成器函數，它現在是一類新的函數：async函數，並且我們也不用yield暫停點來暫停等待瞭，而是使用await等待並決議。我們await瞭一個promise，async函數就會自動獲知要做什麼，它會暫停這個函數（就像yield），直到promise生成成功/拒絕的結果。

小結

生成器是ES6的一個新的函數類型，它並不像普通函數那樣總是從運行開始到運行結束。取而代之的是，生成器yield可以在運行當中暫停，並且等到將來再次next()時再從暫停的地方恢復運行。

這種交替的暫停和恢復是合作式的雙向消息傳遞，這意味著生成器具有獨一無二的能力來暫停自身，這是通過關鍵字yield實現的。不過，隻有控制生成器的迭代器具有恢復生成器的功能（比如next()）

yield和next()這一對不隻是一種控制機制，實際上也是一種雙向消息傳遞機制。yield..表達式本質是暫停下來等待某個值，接下來的next()調用會向被暫停的yield表達式傳回一個值（或者是隱式的undefined）

有時，我們還會把可能的異步藏在yield後面，把異步移動到控制生成器的迭代器的代碼部分，如yield foo(1,2)。換句話說，生成器為異步代碼保持瞭順序、同步、阻塞的代碼模式，這使得大腦可以更自然地追蹤代碼，解決瞭基於回調的異步的缺陷。

以上就是一文瞭解你不知道的JavaScript生成器篇的詳細內容，更多關於JavaScript生成器的資料請關註WalkonNet其它相關文章！

推薦閱讀：

• 詳解ES9的新特性之異步遍歷Async iteration
• await-to-js源碼深入理解處理異步任務用法示例
• JavaScript Generator異步過度的實現詳解
• Node.js中的異步生成器與異步迭代詳解
• JS異步代碼單元測試之神奇的Promise