[[347310]]

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

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

生成器執(zhí)行流程

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

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

舉個(gè)例子:

function* gen() { 
  console.log("enter"); 
  let a = yield 1; 
  let b = yield (function () {return 2})(); 
  return 3; 
} 
var g = gen() // 阻塞住，不會(huì)執(zhí)行任何語(yǔ)句 
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í)行有這樣幾個(gè)關(guān)鍵點(diǎn):

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

yield* 語(yǔ)法

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

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

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

在 gen1 中，修改如下:

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

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

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

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

什么是協(xié)程?

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

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

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

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

舉個(gè)具體的例子:

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é)束了 

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

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