详解JavaScript ES6中的Generator

今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性。

这里的“神奇”意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂。从某种意义上说,它完全改变了这门语言的通常行为,这不是“神奇”是什么呢。

不仅如此,该特性还可以简化程序代码,将复杂的“回调堆栈”改成直线执行的形式。

我是不是铺垫的太多了?下面开始深入介绍,你自己去判断吧。
简介

什么是 Generator?

看下面代码:

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* 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!"; }

上面代码是模仿Talking cat(当下一个非常流行的应用)的一部分,点击这里试玩,如果你对代码感到困惑,那就回到这里来看下面的解释。

这看上去很像一个函数,这被称为 Generator 函数,它与我们常见的函数有很多共同点,但还可以看到下面两个差异:

通常的函数以 function 开始,但 Generator 函数以 function* 开始。
    在 Generator 函数内部,yield 是一个关键字,和 return 有点像。不同点在于,所有函数(包括 Generator 函数)都只能返回一次,而在 Generator 函数中可以 yield 任意次。yield 表达式暂停了 Generator 函数的执行,然后可以从暂停的地方恢复执行。

常见的函数不能暂停执行,而 Generator 函数可以,这就是这两者最大的区别。
原理

调用 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 } > 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 程序员的第二天性。

Generator 函数的调用方法与普通函数一样:quips("jorendorff"),但调用一个 Generator 函数时并没有立即执行,而是返回了一个 Generator 对象(上面代码中的 iter),这时函数就立即暂停在函数代码的第一行。

每次调用 Generator 对象的 .next() 方法时,函数就开始执行,直到遇到下一个 yield 表达式为止。

这就是为什么我们每次调用 iter.next() 时都会得到一个不同的字符串,这些都是在函数内部通过 yield 表达式产生的值。

当执行最后一个 iter.next() 时,就到达了 Generator 函数的末尾,所以返回结果的 .done属性值为 true,并且 .value 属性值为 undefined。

现在,回到 Talking cat 的 DEMO,尝试在代码中添加一些 yield 表达式,看看会发生什么。

从技术层面上讲,每当 Generator 函数执行遇到 yield 表达式时,函数的栈帧 — 本地变量,函数参数,临时值和当前执行的位置,就从堆栈移除,但是 Generator 对象保留了对该栈帧的引用,所以下次调用 .next() 方法时,就可以恢复并继续执行。

值得提醒的是 Generator 并不是多线程。在支持多线程的语言中,同一时间可以执行多段代码,并伴随着执行资源的竞争,执行结果的不确定性和较好的性能。而 Generator 函数并不是这样,当一个 Generator 函数执行时,它与其调用者都在同一线程中执行,每次执行顺序都是确定的,有序的,并且执行顺序不会发生改变。与线程不同,Generator 函数可以在内部的 yield 的标志点暂停执行。

通过介绍 Generator 函数的暂停、执行和恢复执行,我们知道了什么是 Generator 函数,那么现在抛出一个问题:Generator 函数到底有什么用呢?
迭代器

通过上篇文章,我们知道迭代器并不是 ES6 的一个内置的类,而只是作为语言的一个扩展点,你可以通过实现 [Symbol.iterator]() 和 .next() 方法来定义一个迭代器。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdwjg.html