2. 程式人生 > >Generator函數語法解析

Generator函數語法解析

阿新 • • 發佈：2018-01-21
無法 跟著 產生 one 構造 logs don ati 下一個

轉載請註明出處: Generator函數語法解析

Generator函數是ES6提供的一種異步編程解決方案，語法與傳統函數完全不同。以下會介紹一下Generator函數。

寫下這篇文章的目的其實很簡單，是想梳理一下自己對於Generator的理解，同時呢，為學習async函數做一下知識儲備。

Generator函數

  1. 基本概念
  2. yield表達式
  3. next方法
  4. next方法的參數
  5. yield*表達式
  6. 與Iterator接口的關系
  7. for...of循環
  8. 作為對象屬性的Generator函數
  9. Generator函數中的this
  10. 應用

基本概念

對於Generator函數(也可以叫做生成器函數)的理解，可以從四個方面：

形式上：Generator函數是一個普通的函數，不過相對於普通函數多出了兩個特征。一是在function關鍵字和函數明之間多了‘*‘號；二是函數內部使用了yield表達式，用於定義Generator函數中的每個狀態。

語法上：Generator函數封裝了多個內部狀態(通過yield表達式定義內部狀態)。執行Generator函數時會返回一個遍歷器對象(Iterator對象)。也就是說，Generator是遍歷器對象生成函數，函數內部封裝了多個狀態。通過返回的Iterator對象，可以依次遍歷(調用next方法)Generator函數的每個內部狀態。

調用上：普通函數在調用之後會立即執行，而Generator函數調用之後不會立即執行，而是會返回遍歷器對象(Iterator對象)。通過Iterator對象的next方法來遍歷內部yield表達式定義的每一個狀態。

寫法上：*號放在哪裏好像都可以也。看個人習慣吧，我喜歡第一種寫法

function *gen () {}   √
function* gen () {}
function * gen () {}
function*gen () {}

yield表達式

yield，英文意思即產生、退讓的意思，因此yield表達式也有兩種作用：定義內部狀態和暫停執行。

舉一個栗子吧: )

function *gen () {
  yield 1
  yield 2
  return 3
}

const g = gen()   // Iterator對象
g.next() // {value: 1, done: false}
g.next() // {value: 2, done: false}
g.next() // {value: 3, done: true}

從上面代碼中可以看出，gen函數使用yield表達式定義了兩個內部狀態。同時呢，也可以看出來，return語句只能有一個，而yield表達式卻可以有多個。

執行gen函數之後，會返回一個遍歷器對象，而不是立即執行gen函數。如果需要獲取yield表達式定義的每個狀態，需要調用next方法。

每調用一次next方法都會返回一個包含value和done屬性的對象，此時會停留在某個yield表達式結尾處。value屬性值即是yield表達式的值；done屬性是布爾值，表示是否遍歷完畢。

另外呢，yield表達式沒有返回值，或者說返回值是undefined。待會會說明一下如何給yield表達式傳遞返回值。

需要註意的是，yield表達式的值，只有調用next方法時才能獲取到。因此等於為JavaScript提供了手動的‘惰性求值‘(Lazy Evaluation)的功能。

一般情況下，Generator函數會結合yield表達式使用，通過yield表達式定義多個內部狀態。但是，如果不使用yield表達式的Generator函數就成為了一個單純的暫緩執行函數，個人感覺沒什麽意義...

function *gen () {
  console.log(‘凱斯‘)
}

window.setTimeout(() => {
  gen().next()
}, 2000)

// 不使用yield表達式來暫停函數的執行，還不如使用普通函數呢..
// 所以Generator函數配合yield表達式使用效果更佳

另外，yield表達式如果用在另一個表達式中，需要為其加上圓括號。作為函數參數和語句是可以不使用圓括號。

function *gen () {
  console.log(‘hello‘ + yield) ×
  console.log(‘hello‘ + (yield)) √
  console.log(‘hello‘ + yield ‘凱斯‘) ×
  console.log(‘hello‘ + (yield ‘凱斯‘)) √
  foo(yield 1)  √
  const param = yield 2  √
}

next方法

yield表達式具有暫停執行的功能，而恢復執行的是next方法。每一次調用next方法，就會從函數頭部或者上一次停下來的地方開始執行，直到遇到下一個yield表達式(return 語句)為止。同時，調用next方法時，會返回包含value和done屬性的對象，value屬性值可以為yield表達式、return語句後面的值或者undefined值，done屬性表示遍歷是否結束。

遍歷器對象的next方法(從Generator函數繼承而來)的運行邏輯如下

  1. 遇到yield表達式，就暫停執行後面的操作，並將緊跟在yield表達式後面的那個表達式的值，作為返回的對象的value屬性值。
  2. 下一次調用next方法時，再繼續往下執行，直到遇到下一個yield表達式。
  3. 如果沒有再遇到新的yield表達式，就一直運行到函數結束，直到遇到return語句為止，並將return語句後面表達式的值，作為返回的對象的value屬性值。
  4. 如果該函數沒有return語句，則返回的對象的value屬性值為undefined。

從上面的運行邏輯可以看出，返回的對象的value屬性值有三種結果：

  1. yield表達式後面的值
  2. return語句後面的值
  3. undefined

也就是說，如果有yield表達式，則value屬性值就是yield表達式後面的指；如果沒有yield表達式，value屬性值就等於return語句後面的值；如果yield表達式和return語句都不存在的話，則value屬性值就等於undefined。舉個例子: )

function *gen () {
  yield 1
  yield 2
  return 3
}

const g = gen()
g.next() // {value: 1, done: false}
g.next() // {value: 2, done: false}
g.next() // {value: 3, done: true}
g.next() // {value: undefined, done: true}

根據next運行邏輯再針對這個例子，就很容易理解了。調用gen函數，返回遍歷器對象。

第一次調用next方法時，在遇到第一個yield表達式時停止執行，value屬性值為1，即yield表達式後面的值，done為false表示遍歷沒有結束；

第二次調用next方法時，從暫停的yield表達式後開始執行，直到遇到下一個yield表達式後暫停執行，value屬性值為2，done為false；

第三次調用next方法時，從上一次暫停的yield表達式後開始執行，由於後面沒有yield表達式了，所以遇到return語句時函數執行結束，value屬性值為return語句後面的值，done屬性值為true表示已經遍歷完畢了。

第四次調用next方法時，value屬性值就是undefined了，此時done屬性為true表示遍歷完畢。以後再調用next方法都會是這兩個值。

next方法的參數

yield表達式本身沒有返回值，或者說總是返回undefined。

function *gen () {
  var x = yield ‘hello world‘
  var y = x / 2
  return [x, y]
}
const g = gen()
g.next()    // {value: ‘hello world‘, done: false}
g.next()    // {value: [undefined, NaN], done: true}

從上面代碼可以看出，第一次調用next方法時，value屬性值是‘hello world‘，第二次調用時，由於變量y的值依賴於變量x，而yield表達式沒有返回值，所以返回了undefined給變量x，此時undefined / 2為NaN。

要解決上面的問題，可以給next方法傳遞參數。next方法可以帶一個參數，該參數就會被當作上一個yield表達式的返回值。

function *gen () {
  var x = yield ‘hello world‘
  var y = x / 2
  return [x, y]
}
const g = gen()
g.next()    // {value: ‘hello world‘, done: false}
g.next(10)    // {value: [10, 5], done: true}

當給第二個next方法傳遞參數10時，yield表達式的返回值為10，即var x = 10，所以此時變量y為5。

註意，由於next方法的參數表示上一個yield表達式的返回值，所以在第一次使用next方法時，傳遞參數是無效的。V8引擎直接忽略第一次使用next方法的參數，只有從第二次使用next方法開始，參數才是有效的。從語義上說，第一個next方法用來啟動遍歷器對象，所以不用帶上參數。所以呢，每次使用next方法會比yield表達式要多一次。

如果想要第一次調用next方法時就可以傳遞參數，可以使用閉包的方式。

// 實際上就是在閉包內部執行了一次next方法
function wrapper (gen) {
  return function (...args) {
    const genObj = gen(...args)
    genObj.next()
    return genObj
  }
}
const generator = wrapper(function *generator () {
  console.log(`hello ${yield}`)
  return ‘done‘
})
const a = generator().next(‘keith‘)
console.log(a)   // hello keith, done

yield*表達式
如果在Generator函數中調用另一個Generator函數，默認情況下是無效的。

function *foo () {
  yield 1
}
function *gen () {
  foo()
  yield 2
}
const g = gen()
g.next()  // {value: 2, done: false}
g.next()  // {value: undefined, done: true}

從上面代碼中可以看出，並沒有在yield 1處停止執行。此時就需要使用yield* 表達式。從語法角度上說，如果yield表達式後面跟著遍歷器對象，需要在yield表達式後面加上星號，表明它返回的是一個遍歷器對象。實際上，yield*表達式是for...of循環的簡寫，完全可以使用for...of循環來代替yield*表達式

function *foo () {
  yield 1
}
function *gen () {
  yield* foo()
  yield 2
}
const g = gen()
g.next()   // {value: 1, done: false}
g.next()   // {value: 2, done: false}
g.next()   // {value: undefined, done: true}

// 相當於
function *gen () {
  yield 1
  yield 2
}

// 相當於
function *gen () {
  for (let item of foo()) {
    yield item
  }
  yield 2
}

如果直接使用了yield foo()，返回的對象的value屬性值為一個遍歷器對象。而不是Generator函數的內部狀態。

function *foo () {
  yield 1
}
function *gen () {
  yield foo()
  yield 2
}
const g = gen()
g.next()   // {value: Generator, done: false}
g.next()   // {value: 2, done: false}
g.next()   // {value: undefined, done: true}

另外，任何數據類型(Array, String)只要有Iterator接口，就能夠被yield*遍歷

const arr = [‘a‘, ‘b‘]
const str = ‘keith‘
function *gen () {
  yield arr
  yield* arr
  yield str
  yield* str
}
const g = gen()
g.next() // {value: [‘a‘, ‘b‘], done: false}
g.next() // {value: ‘a‘, done: false}
g.next() // {value: ‘b‘, done: false}
g.next() // {value: ‘keith‘, done: false}
g.next() // {value: ‘k‘, done: false}
...

如果在Generator函數中存在return語句，則需要使用let value = yield* iterator方式獲取返回值。

function *foo () {
  yield 1
  return 2
}
function *gen () {
  var x = yield* foo()
  return x
}
const g = gen()
g.next()  // {value: 1, done: false}
g.next()  // {value: 2, done: true}

使用yield*表達式可以很方便的取出嵌套數組的成員。

// 普通方法
const arr = [1, [[2, 3], 4]]
const str = arr.toString().replace(/,/g, ‘‘)
for (let item of str) {
  console.log(+item)      // 1, 2, 3, 4
}

// 使用yield*表達式
function *gen (arr) {
  if (Array.isArray(arr)) {
    for (let i = 0; i < arr.length; i++) {
      yield * gen(arr[i])
    }
  } else {
    yield arr
  }
}
const g = gen([1, [[2, 3], 4]])
for (let item of g) {
  console.log(item)       // 1, 2, 3, 4
}

與Iterator接口的關系

任何一個對象的Symbol.iterator屬性，指向默認的遍歷器對象生成函數。而Generator函數也是遍歷器對象生成函數，所以可以將Generator函數賦值給Symbol.iterator屬性，這樣就使對象具有了Iterator接口。默認情況下，對象是沒有Iterator接口的。
具有Iterator接口的對象，就可以被擴展運算符(...)，解構賦值，Array.from和for...of循環遍歷了。

const person = {
  name: ‘keith‘,
  height: 180
}
function *gen () {
  const arr = Object.keys(this)
  for (let item of arr) {
    yield [item, this[item]]
  }
}
person[Symbol.iterator] = gen
for (let [key, value] of person) {
  console.log(key, value)   // name keith , height 180
}

Generator函數函數執行之後，會返回遍歷器對象。該對象本身也就有Symbol.iterator屬性，執行後返回自身

function *gen () {}
const g = gen()
g[Symbol.iterator]() === g    // true

for...of循環

for...of循環可以自動遍歷Generator函數生成的Iterator對象，不用調用next方法。

function *gen () {
  yield 1
  yield 2
  yield 3
  return 4
}
for (let item of gen()) {
  console.log(item)  // 1 2 3
}

上面代碼使用for...of循環，依次顯示 3 個yield表達式的值。這裏需要註意，一旦next方法的返回對象的done屬性為true，for...of循環就會中止，且不包含該返回對象，所以上面代碼的return語句返回的6，不包括在for...of循環之中。

作為對象屬性的Generator函數

如果一個對象有Generator函數，那麽可以使用簡寫方式

let obj = {
  * gen () {}
}
// 也可以完整的寫法
let obj = {
  gen: function *gen () {}
}

當然了，如果是在構造函數中，簡寫形式也是一樣的。

class F {
  * gen () {}
}

Generator函數中的this

Generator函數中的this對象跟構造函數中的this對象有異曲同工之處。先來看看構造函數中的new關鍵字的工作原理。

function F () {
  this.a = 1
}
const f = new F()
  1. 調用構造函數F，返回實例對象f
  2. 將構造函數內部中的this指向這個實例對象
  3. 將構造函數中的原型對象賦值給實例對象的原型
  4. 執行構造函數中的代碼

調用Generator函數會返回遍歷器對象，而不是實例對象，因此無法獲取到this指向的實例對象上的私有屬性和方法。但是這個遍歷器對象可以繼承Generator函數的prototype原型對象上的屬性和方法(公有屬性和方法)。

function *Gen () {
  yield this.a = 1
}
Gen.prototype.say = function () {
  console.log(‘keith‘)
}
const g = new Gen()
g.a      // undefined
g.say()  // ‘keith‘

如果希望修復this指向性問題，可以使用call方法將函數執行時所在的作用域綁定到Generator.prototype原型對象上。這樣做，會使私有屬性和方法變成公有的了，因為都在原型對象上了。

function *Gen () {
  this.a = 1
  yield this.b = 2
  yield this.c = 3
}
const g = Gen.call(Gen.prototype)
g.next()   // {value: 2, done: false}
g.next()   // {value: 3, done: false}
g.next()   // {value: undefined, done: true}
g.a        // 1，繼承自Gen.prototype
g.b        // 2，同上
g.c        // 3，同上

應用

Generator函數的應用主要在異步編程上，會在下一篇文章中分享。請期待噢: )

Generator函數語法解析

相關推薦

Generator函數語法解析

無法 跟著 產生 one 構造 logs don ati 下一個 轉載請註明出處: Generator函數語法解析 Generator函數是ES6提供的一種異步編程解決方案，語法與傳統函數完全不同。以下會介紹一下Generator函數。 寫下這篇文章的目的其實很簡單，是想梳

C++ 虛函數表解析

不同 存在 是我 fun 目前 details deb 比較 clu C++ 虛函數表解析 前言 原文地址：http://blog.csdn.net/haoel/article/details/1948051/ C++中的虛函數的作用主要是實現了多態的機制。關於多態，簡

JS的全局函數eval解析JSON字符串函數

可能 bject logs 將不 檢測 mas obj 全局函數 dem JavaScript eval() 函數 定義和用法 eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。 語法 eval(string) 參數描

WSARecv() 函數使用解析

time sar truct mean flag blocking ini odi struct 詳情參考：https://msdn.microsoft.com/en-us/library/windows/desktop/ms741688(v=vs.85).aspx 簡述

ES6遍歷器以及generator函數的說明

內存 gen spa 遍歷 ner 性能 tor es6 計算機 從es5之後，js被各種人玩爛了之後，不得不提起的性能擺在臺面上。可能是這些原因，js把底層的一些更深層的東西都開放出來了。 1.遍歷器 iterator 在了解這個東西之前，需要先了解一下計算機對內存的處理

第112天：javascript中函數預解析和執行階段

col 對象 全部 內存空間 div 實現 undefined 私有 分解 關於javascript中的函數： 　　1、預解析：把所有的函數定義提前，所有的變量聲明提前，變量的賦值不提前 　　2、執行 ：從上到下執行，但有例外(setTimeout,setInterval,

ES6必知必會 （七）—— Generator 函數

獲取 out through 屬性表 rom 代碼 指針 task 不執行 Generator 函數 1.Generator 函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同，通常有兩個特征： function關鍵字與函數名之間有一個星號；

sql server中的charindex函數用法解析（在一段字符中搜索字符或者字符串-----返回expression1在expression2出現的位置；反之，返回0）

abcde char 解析 ssi num 結果 -- art pan https://blog.csdn.net/xinghuo0007/article/details/70651358 知識點一：charindex（）語法 CHARINDEX ( exp

es6 中的generator函數控制流程

block don 以及 params 服務器 計數 計數器 多次 怎麽辦 Generator函數跟普通函數的寫法有非常大的區別： 一是，function關鍵字與函數名之間有一個星號； 二是，函數體內部使用yield語句，定義不同的內部狀態（yield在英語裏的意思就是

關於函數的解析；

指向 繼承 style pan back ccf arr ply -c 函數，如果把它當做函數看，就只能起到函數的意思，可以封裝。如果我們 把他當做函數對象看，就可以實現一些繼承，可以在控制臺dir（展開）然後就 可以發現在原型鏈上函數對象天生自帶call（），apply（

C++虛函數表解析

一個 位置 子類的成員函數 table gic 重載 vs2003 靜態 壞事 C++ 虛函數表解析<?xml:namespace prefix = o /> 陳皓 http://blog.csdn.net/haoel 前言 C++中

es6 generator函數

val 直接 普通 返回值 就是 gen 跳轉 對象屬性 訪問 　　es6 新增了Generator函數，一種異步編程的解決方案 　　　　回顧一下，es6 提供了新的遍歷方法，for of ，適用於各種數據集合，統一了遍歷操作，原生支持for of 集合的數據集合有。數組

ES6學習筆記（十五）Generator函數的異步應用

處理機 arguments 最新 如果 back 舉例 .com 單獨 是否 1.傳統方法 ES6 誕生以前，異步編程的方法，大概有下面四種。 回調函數 事件監聽 發布/訂閱 Promise 對象 Generator 函數將 JavaScript 異步編

ES6中的叠代器、Generator函數以及Generator函數的異步操作

The gif color 博客 find 編寫 使用 不難 9.png 最近在寫RN相關的東西，其中涉及到了redux-saga ，saga的實現原理就是ES6中的Generator函數，而Generator函數又和叠代器有著密不可分的關系。所以本篇博客先學習總結了ite

檢測某個方法是否屬於某個類中--解析php函數method_exists()與is_callable()的區別

檢查 -1 元素 高級 ech 9.png true strong 原創 php函數method_exists() 與is_callable()的區別在哪？在php面相對象設計過程中，往往我們需要在調用某一個方法是否屬於某一個類的時候做出判斷，常用的方法有 meth

深度解析PHP數組函數array_combine

影響 參數數組 clas () 我們 出現 發現 一點 函數 前些天寫了一篇關於array_merge的函數解析。 今天來看一個新的函數array_combine() 此函數一共有兩個參數，一個是合並後數組的鍵名，另一個為鍵值。 註意：合並後數組的鍵名放在第一個參數位上，鍵

深度解析PHP數組函數array_chunk

數組 三個參數 ret http print 是否 div 解析 logs array_chunk是PHP中的一個數組分割函數，是將一個數組分割為多個數組塊 我們可以把它理解賣豆腐的商人把一整塊大豆腐切割為一個一個的小塊來進行售賣 這個函數需要三個參數： 　　被切割的數組（

eval函數解析json表達式

鍵值 ota 宋體 span size 簡化 parse color pan Eval函數解析 *********************** ps:JSON（JavaScript Object Notation，JavaScript對象表示法）是一個輕量級的數據格式，可以

Jquery回調函數應用實例解析

light wid cnblogs 動作 body span 廣泛 使用 我們 　　jQuery代碼中對回調函數有著廣泛的應用，對其有精準的理解是非常有必要的，下面就通過實例對此方法進行簡單的介紹。 代碼實例如下： 利用回調函數，當div全部隱藏之後彈出一個提示框。 &l

函數的語法（標準模版）

con string reat sql 流程控制 font arch def ack 自定義函數 (user-defined function UDF)就是用一個象ABS() 或 CONCAT()這樣的固有（內建）函數一樣作用的新函數去擴展MySQL，所以UDF是對MySQ