[[347310]]

本文轉(zhuǎn)載自微信公眾號「前端三元同學(xué)」，作者神三元。轉(zhuǎn)載本文請聯(lián)系前端三元同學(xué)公眾號。  

生成器(Generator)是 ES6 中的新語法，相對于之前的異步語法，上手的難度還是比較大的。因此這里我們先來好好熟悉一下 Generator 語法。

生成器執(zhí)行流程

什么是生成器函數(shù)?

生成器是一個帶星號的"函數(shù)"(注意：它并不是真正的函數(shù))，可以通過yield關(guān)鍵字暫停執(zhí)行和恢復(fù)執(zhí)行的

舉個例子:

function* gen() { 
  console.log("enter"); 
  let a = yield 1; 
  let b = yield (function () {return 2})(); 
  return 3; 
} 
var g = gen() // 阻塞住，不會執(zhí)行任何語句 
console.log(typeof g)  // object  看到了嗎？不是"function" 
 
console.log(g.next())   
console.log(g.next())   
console.log(g.next())   
console.log(g.next())  
 
 
// enter 
// { value: 1, done: false } 
 
// { value: 2, done: false } 
// { value: 3, done: true } 
// { value: undefined, done: true } 

由此可以看到，生成器的執(zhí)行有這樣幾個關(guān)鍵點(diǎn):

1. 調(diào)用 gen() 后，程序會阻塞住，不會執(zhí)行任何語句。
2. 調(diào)用 g.next() 后，程序繼續(xù)執(zhí)行，直到遇到 yield 程序暫停。
3. next 方法返回一個對象， 有兩個屬性: value 和 done。value 為當(dāng)前 yield 后面的結(jié)果，done 表示是否執(zhí)行完，遇到了return 后，done 會由false變?yōu)閠rue。

yield* 語法

當(dāng)一個生成器要調(diào)用另一個生成器時，使用 yield* 就變得十分方便。比如下面的例子:

function* gen1() { 
    yield 1; 
    yield 4; 
} 
function* gen2() { 
    yield 2; 
    yield 3; 
} 

我們想要按照1234的順序執(zhí)行，如何來做呢?

在 gen1 中，修改如下:

function* gen1() { 
    yield 1; 
    yield* gen2(); 
    yield 4; 
} 

這樣修改之后，之后依次調(diào)用next即可。

生成器實現(xiàn)機(jī)制——協(xié)程

可能你會比較好奇，生成器究竟是如何讓函數(shù)暫停, 又會如何恢復(fù)的呢?接下來我們就來對其中的執(zhí)行機(jī)制——協(xié)程一探究竟。

什么是協(xié)程?

協(xié)程是一種比線程更加輕量級的存在，協(xié)程處在線程的環(huán)境中，一個線程可以存在多個協(xié)程，可以將協(xié)程理解為線程中的一個個任務(wù)。不像進(jìn)程和線程，協(xié)程并不受操作系統(tǒng)的管理，而是被具體的應(yīng)用程序代碼所控制。

協(xié)程的運(yùn)作過程

那你可能要問了，JS 不是單線程執(zhí)行的嗎，開這么多協(xié)程難道可以一起執(zhí)行嗎?

答案是：并不能。一個線程一次只能執(zhí)行一個協(xié)程。比如當(dāng)前執(zhí)行 A 協(xié)程，另外還有一個 B 協(xié)程，如果想要執(zhí)行 B 的任務(wù)，就必須在 A 協(xié)程中將JS 線程的控制權(quán)轉(zhuǎn)交給 B協(xié)程，那么現(xiàn)在 B 執(zhí)行，A 就相當(dāng)于處于暫停的狀態(tài)。

舉個具體的例子:

function* A() { 
  console.log("我是A"); 
  yield B(); // A停住，在這里轉(zhuǎn)交線程執(zhí)行權(quán)給B 
  console.log("結(jié)束了"); 
} 
function B() { 
  console.log("我是B"); 
  return 100;// 返回，并且將線程執(zhí)行權(quán)還給A 
} 
let gen = A(); 
gen.next(); 
gen.next(); 
 
// 我是A 
// 我是B 
// 結(jié)束了 

在這個過程中，A 將執(zhí)行權(quán)交給 B，也就是 A 啟動 B，我們也稱 A 是 B 的父協(xié)程。因此 B 當(dāng)中最后return 100其實是將 100 傳給了父協(xié)程。

需要強(qiáng)調(diào)的是，對于協(xié)程來說，它并不受操作系統(tǒng)的控制，完全由用戶自定義切換，因此并沒有進(jìn)程/線程上下文切換的開銷，這是高性能的重要原因。