ES6深度解析3:Generators

Max力出奇跡 發表於 2021-07-07
JavaScript ES6

介紹ES6 Generators

什麼是Generators(生成器函式)?讓我們先來看看一個例子。

function* quips(name) {
  yield "hello " + name + "!";
  yield "i hope you are enjoying the blog posts";
  if (name.startsWith("X")) {
    yield "it's cool how your name starts with X, " + name;
  }
  yield "see you later!";
}

這是一隻會說話的貓的一些程式碼,可能是當今網際網路上最重要的一種應用。它看起來有點像一個函式,對嗎?這被稱為生成器-函式,它與函式有很多共同之處。但你馬上就能看到兩個不同之處。

  • 普通函式以function開頭,生成器函式以function*開頭
  • 在生成器函式中,yield是一個關鍵字,語法看起來像return。不同的是,函式(甚至是生成器函式)只能返回一次,而生成器函式可以“yield”任何次數。yield表示式暫停了生成器的執行,同時它可以在以後再次恢復。

Generators可以做什麼

當你呼叫生成器-函式quips()時會發生什麼?

> var iter = quips("jorendorff");
  [object Generator]
> iter.next()
  { value: "hello jorendorff!", done: false }
> iter.next()
  { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
  { value: "see you later!", done: false }
> iter.next()
  { value: undefined, done: true }

你可能已經非常習慣於普通函式和它們的行為方式。當你呼叫它們時,它們會立即開始執行,並一直執行到返回或丟擲異常。所有這些對任何JS程式設計師來說都是第二天性。呼叫一個生成器看起來也是一樣的:quips("jorendorff")。但是當你呼叫一個生成器時,它還沒有開始執行。相反,它返回一個暫停的Generator物件iter(就是在上面的例子中叫做iter的物件)。你可以把這個Generator物件看作是一個函式呼叫,在呼叫前被凍結。具體來說,它被凍結在生成器函式的頂端,就在執行其第一行程式碼之前。每次你呼叫Generator物件的方法.next()時,函式呼叫都會自我解凍,並執行到下一個yield表示式為止。這就是為什麼我們每次呼叫上面的iter.next()方法,都會得到一個不同的字串值。這些都是由函式quips()中的yield表示式產生的值。在最後一次iter.next()呼叫中,我們終於到達了生成器-函式的終點,所以結果中.done欄位的值是true。到達生成器函式的終點就像普通函式返回undefined一樣,這就是為什麼結果的value欄位值是undefined

現在可能是一個好時機,回到會說話的貓的演示頁面,真正地玩一玩程式碼。試著把yield放在一個迴圈裡面。會發生什麼?從技術上講,每次Generator執行yield時,它的堆疊--區域性變數、引數、臨時值以及當前在Generator主體中的執行位置--都會從堆疊中刪除。然而,Generator物件會保留對這個堆疊框架的引用(或副本),以便以後.next()呼叫可以重新啟用它並繼續執行。

值得指出的是,Generator不是執行緒。在有執行緒的語言中,多段程式碼可以同時執行,通常會導致競賽條件、非確定性和甜蜜的效能。Generator則完全不是這樣的。當一個Generator執行時,它與呼叫者在同一個執行緒中執行。執行的順序是順序的、確定的,而不是併發的。與系統執行緒不同,Generator只在其函式體中標明的yield點上暫停執行。

好了。我們知道Generator是什麼。我們已經看到了一個Generator的執行,暫停自己,然後恢復執行。現在有個大問題。這種奇怪的能力怎麼可能有用?

Generators就是迭代器(Generators are iterators)

ES6迭代器不僅僅是一個單一的內建類。它們是該語言的一個擴充套件點。你可以通過實現兩個方法Symbol.iteratornext()來建立你自己的迭代器。但是實現一個介面至少要做一點工作。讓我們看看迭代器的實現在實踐中是什麼樣的。作為一個例子,讓我們做一個簡單的迭代器range,它只是從一個數字到另一個數字進行計數,就像一個老式的C迴圈for (;😉一樣。

// This should "ding" three times
for (var value of range(0, 3)) {
  alert("Ding! at floor #" + value);
}

這裡有一個解決方案,使用ES6類class

class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }

  [Symbol.iterator]() { return this; }

  next() {
    var value = this.value;
    if (value < this.stop) {
      this.value++;
      return {done: false, value: value};
    } else {
      return {done: true, value: undefined};
    }
  }
}

// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
  return new RangeIterator(start, stop);
}

程式碼示例

這就是在Java或Swift中實現迭代器的情況。這並不壞。但也不完全是微不足道的。這段程式碼裡有什麼錯誤嗎?這可不好說。它看起來完全不像我們在這裡試圖模仿的原始迴圈:for (;😉,迭代器協議迫使我們拆除了迴圈。在這一點上,你可能對迭代器感到有點冷淡。它們可能很好用,但似乎很難實現。

你可能不會想建議我們在JS語言中引入一個瘋狂的、令人費解的新控制流結構,只是為了使迭代器更容易構建。但既然我們有生成器Generator,我們能在這裡使用它們嗎?讓我們試試吧。

function* range(start, stop) {
  for (var i = start; i < stop; i++)
    yield i;
}

程式碼示例

上面的4行range()程式碼可以直接替代以前的23行實現,包括整個類RangeIterator就是因為Generator是迭代器,所以這一切才是可能的。所有的生成器都有一個內建的next()Symbol.iterator的實現。 你只需寫出迴圈的行為。

在沒有Generator的情況下實現迭代器,就像被迫完全用被動語態來寫一封長郵件。當簡單地說出你的意思不是一個選項時,你最終說的東西可能會變得相當複雜。"我的意思是,我的意思是,我必須在不使用迴圈語法的情況下描述一個迴圈的功能,所以RangeIterator又長又奇怪。而Generator就是答案

我們還可以如何利用生成器作為迭代器的能力呢?

  • 讓任何物件都可以迭代。只需寫一個Generator函式來遍歷this,在遍歷時產生(yield)每個值。然後把這個生成器函式設定為this物件的[Symbol.iterator]方法。
  • 簡化建陣列函式。假設你有一個函式,每次呼叫都會返回一個陣列的結果,就像下面這個函式:
//將一維陣列'圖示'切分成長度為'rowLength'的陣列
function splitIntoRows(icons, rowLength) {
  var rows = [];
  for (var i = 0; i < icons.length; i += rowLength) {
    rows.push(icons.slice(i, i + rowLength));
  }
  return rows;
}

使用Generator會讓這種程式碼更短一些。

function* splitIntoRows(icons, rowLength) {
  for (var i = 0; i < icons.length; i += rowLength) {
    yield icons.slice(i, i + rowLength);
  }
}

執行時唯一區別是,它不是一次性計算所有的結果並返回一個陣列,而是返回一個迭代器,然後根據需要逐個計算結果。

  • 異常大小的結果。你不可能建立一個無限的陣列。但是你可以返回一個Generator,生成一個無盡的序列,每個呼叫者可以從其中提取他們需要的任何數量的值。

  • 重構複雜的迴圈。你有一個巨大的醜陋的函式嗎?你想把它分解成兩個更簡單的部分嗎?Generator是新增到你的重構工具箱中的一把新刀。當你面對一個複雜的迴圈時,你可以把程式碼中產生資料的部分分解出來,把它變成一個單獨的生成器-函式。然後將迴圈改為:for (var data of myNewGenerator(args))

  • 處理可迭代資料的工具。ES6並沒有提供一個擴充套件庫,用於過濾、對映,以及一般情況下對任意的可迭代資料集進行任意的處理。但是Generator對於構建你所需要的工具來說是非常棒的,只需要幾行程式碼。例如,假設你需要一個新的在DOM NodeLists上遍歷的方法,而不僅僅是Arrays。小菜一碟:建立Array.prototype.filter

function* filter(test, iterable) {
  for (var item of iterable) {
    if (test(item))
      yield item;
  }
}

那麼Generator是否有用呢?當然,它們是實現自定義迭代器的一種驚人的簡單方法,而且迭代器是整個ES6的資料和迴圈的新標準。但這並不是Generator的全部功能。這甚至可能不是它們所做的最重要的事情。

生成器與非同步程式碼(Generators and asynchronous code)

下面是我前段時間寫的一些JS程式碼。

          };
        })
      });
    });
  });
});

也許你已經在自己的程式碼中看到了這樣的東西。非同步API通常需要一個回撥,這意味著每次你做什麼都要寫一個額外的匿名函式。因此,如果你有一點程式碼做三件事,而不是三行程式碼,你就會看到三個縮排層次的程式碼。下面是我寫的一些更多的JS程式碼。

}).on('close', function () {
  done(undefined, undefined);
}).on('error', function (error) {
  done(error);
});

非同步API有錯誤處理慣例,而不是異常。不同的API有不同的約定。在大多數API中,預設情況下,錯誤會被默默地放棄。在一些API中,即使是普通的成功完成也是預設放棄的。直到現在,這些問題都是我們為非同步程式設計付出的代價。我們已經接受了這樣的事實:非同步程式碼看起來並不像相應的同步程式碼那樣漂亮和簡單。

Generator提供了新的希望:我們不必再寫那樣醜陋的程式碼。

Q.async()是一個實驗性的嘗試,它使用Generators與Promises來產生類似於相應同步程式碼的非同步程式碼。比如說:

// Synchronous code to make some noise.
function makeNoise() {
  shake();
  rattle();
  roll();
}

// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
  return Q.async(function* () {
    yield shake_async();
    yield rattle_async();
    yield roll_async();
  });
}

主要的區別是,非同步版本必須在呼叫非同步函式的每個地方新增關鍵字yield。在該版本中新增像語句if或try/catch塊這樣的程式碼,就像在普通的同步版本中新增它一樣。與其他編寫非同步程式碼的方式相比,這感覺不像是在學習一種全新的語言。(延伸閱讀

因此,Generator為一種新的非同步程式設計模型指明瞭方向,它似乎更適合人類的大腦。這項工作正在進行中。在其他方面,更好的語法可能會有幫助。一項關於非同步函式的建議,建立在Promises和Generators的基礎上,並從C#的類似功能中獲得靈感,已被提上ES7的議程

相關文章