Generator 函数是 ES6 中新增的一种特殊的函数类型，它可以通过 yield 关键字控制函数的执行流程，即在函数执行过程中暂停并返回一个值，再次执行时从上次暂停的位置继续执行。ES7 中对 Generator 函数进行了一些改进，本文将介绍 Generator 函数的实现原理及应用场景。
实现原理
Generator 函数的实现原理主要是基于协程（coroutine），协程是一种比线程更加轻量级的并发解决方案，它可以在单线程中实现多个函数的并发执行。Generator 函数通过 yield 关键字实现协程的控制流程，每次执行到 yield 关键字时，函数会将控制权交给调用者，调用者可以通过 next 方法再次将控制权交回函数内部。
下面是一个简单的 Generator 函数的示例：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ----- -- - ----- - - ------ ---------------------- -- - ------ -- ----- ----- - ---------------------- -- - ------ -- ----- ----- - ---------------------- -- - ------ -- ----- ----- - ---------------------- -- - ------ ---------- ----- ---- -
在上面的示例中，我们定义了一个 Generator 函数 gen，它通过 yield 关键字返回了 1、2、3 三个值。我们通过调用 next 方法依次获取这三个值，最后一个 value 为 undefined，done 为 true 表示函数执行结束。
应用场景
Generator 函数在实际开发中有很多应用场景，下面列举了一些常见的应用场景。
异步编程
由于 Generator 函数可以通过 yield 关键字控制函数的执行流程，因此可以很方便地用于异步编程。下面是一个使用 Generator 函数实现异步编程的示例：
-- -------------------- ---- -------
--------- ----------- -
----- ------- - ----- ----------------------------------
----- ------- - ----- ----------------------------------
----- ------- - ----- ----------------------------------
-------------------- -------- ---------
-
-------- -------------- -
----- --- - ------------
-------- -------------------- -
-- ------------- -
-------
-
--------------------- -- -
----------------------------
---
-
-------------------------
-
---------------在上面的示例中，我们定义了一个异步任务 asyncTask，它通过 yield 关键字控制了函数的执行流程，每次执行到 yield 关键字时暂停并返回一个 Promise 对象，然后在 Promise 对象的回调函数中调用 next 方法继续执行函数。我们通过 runAsyncTask 函数启动异步任务，并通过递归函数 handleResult 处理异步任务的结果。
迭代器
由于 Generator 函数可以通过 yield 关键字返回一个值，因此可以很方便地用于实现迭代器。下面是一个使用 Generator 函数实现迭代器的示例：
-- -------------------- ---- -------
--------- ------------ ---- ----- -
--- ---- - - ------ - -- ---- - -- ----- -
----- --
-
-
--- ------ --- -- -------- --- --- -
-----------------
-在上面的示例中，我们定义了一个 range 函数，它通过 yield 关键字返回一个值，并且可以使用 for...of 循环遍历返回的值。我们通过 for...of 循环遍历 range 函数返回的值，并输出每个值。
状态机
由于 Generator 函数可以通过 yield 关键字控制函数的执行流程，因此可以很方便地用于实现状态机。下面是一个使用 Generator 函数实现状态机的示例：
-- -------------------- ---- -------
--------- -------------- -
--- ----- - --------
----- ------ -
------ ------- -
---- --------
---------------------
----- - ---------
------
---- ---------
----------------------
----- - ------
------
---- ------
-------------------
-------
-
------
-
-
----- -- - ---------------
----------
----------
----------在上面的示例中，我们定义了一个状态机 stateMachine，它通过 yield 关键字控制函数的执行流程，并且使用 while 循环实现了状态机的循环。我们通过调用 next 方法依次执行状态机的状态，并输出每个状态。
总结
Generator 函数是一种很有用的函数类型，它可以通过 yield 关键字控制函数的执行流程，并且可以用于异步编程、迭代器、状态机等多种应用场景。在实际开发中，我们可以根据具体的需求选择使用 Generator 函数，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65deb69a1886fbafa4bf8904