在Generator函數出現之前JS的函數只能返回一個值，返回的方式就是return，但是Generator函數可以返回多個值，返回的方式是yield。并且Generator賦予了外部動態影響函數內部的執行順序的能力。

基礎語法

function* f () {const a = yield 1console.log(a)const b = yield 2console.log(b) }var ff = f()ff.next() // {done: false, value: 1} ff.next(10) // {done: false, value: 2} ff.next(20) // {done: true, value: undefined}

上面函數執行的時候，并沒有開始執行函數體內的內容。當執行ff的next方法的時候開始執行函數體內容，直到yield為止。當遇到yield 則將yield后面的表達式計算出的結果返回到Generator函數外。執行next方法則再次從中斷的地方（上次執行yield跳出函數的地方）進入到Generator函數內部執行，而next的參數就被當做yield表達式的計算結果。

有感

通過上面的描述可以看出是yield和next方法做的事情就是轉讓執行權，當執行遇到yield的時候會將結果返回到函數外，也就是將執行權交到了函數外面，那么什么時候再回來執行Generator內部代碼就要看外部什么時候調用next方法。

一個簡單讓Generator函數自執行函數

function singleCo (ge) {var ff = ge()function next (val) {var res = ff.next(val) // 將執行權交到Generator內部if (res.done) {console.log('Generator函數執行完畢')} else {console.log(res.value)res.value(next) // 將改變執行權的權利交給了，yield出來的chunk函數()}}next() }

上面的函數需要Generator內yield表達式返回的是一個特殊的函數，這個函數會接收一個函數做回調。

function* ge () {var a = yield function (cb) {cb(1)}console.log(a)var b = yield function (cb) {cb(2)}console.log(b) }

開始執行

singleCo(ge) // 會自執行打印出 1 2

參考

Generator 函數的語法

總結

以上是生活随笔為你收集整理的Generator执行步骤浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。