JavaScript Generator 函数详解：从异步回调到协程实践

Generator 函数概述

本文详细解析 JavaScript 中 Generator 函数的定义及其实际应用案例，旨在为读者提供清晰的参考指南。

基于阮一峰老师撰写的《Generator 函数的含义与用法》一文进行总结与梳理。

尽管阮老师的文章通俗易懂，但在个人理解层面仍存在一些困惑，经过反复研读后才逐渐形成初步认知。

现将这些学习心得整理记录如下。

正如常言所说，任何技术或工具的出现，本质上都是为了解决特定的实际问题。

异步编程的挑战与演进

那么，Generator 函数的出现究竟旨在解决什么核心问题？

在异步编程场景中，当存在多个异步任务时，如何有效控制它们的执行顺序是一个关键挑战。

以常见的 jQuery AJAX 请求为例，每个请求的 success 回调都代表一个独立的异步任务。

假设我们需要确保页面渲染操作仅在五个网络请求全部返回数据后才能执行，该如何处理？

这种情况下，代码结构往往会变得极其复杂：

$.ajax({...success:function(data){
  $.ajax({...success:function(data){
    $.ajax({...success:function(data){
      $.ajax({...success:function(data){
        $.ajax({...success:function(data){
          //do something
        }})
      }})
    }})
  }})
}})

这种层层嵌套的结构被称为“回调函数噩梦”（callback hell）。

为应对这一挑战，后续出现了 Deferred 对象和 Promise 机制。

这两者在功能上差异不大，主要通过封装写法来简化回调函数的处理流程。

使用上述机制，之前的 AJAX 请求可以改写为：

ajax1 = $.ajax({...success:function(data){});
ajax2 = $.ajax({...success:function(data){});
ajax3 = $.ajax({...success:function(data){});
ajax4 = $.ajax({...success:function(data){});
ajax5 = $.ajax({...success:function(data){});
$.when(ajax1,ajax2,ajax3,ajax4,ajax5).done(function(
  //do something
)).then(function(){
  //do something2
})

jQuery 1.8 版本以上的 ajax 模块默认返回 Deferred 对象。

Deferred 和 Promise 通过将回调函数拆分，把异步任务的逻辑处理与最终执行分离为两个阶段。

然而，它们的主要缺陷在于代码冗余，封装后的代码必须通过 then 或 done 方法链式执行后续逻辑，导致代码层次感变得模糊。

是否存在一种更自然、更简洁的编写方式？

协程与 Generator 的核心机制

答案在于协程（Coroutine）。此前我也在此处困惑良久，前文提到的概念大多日常接触且原理清晰，但关于协程的应用相对较少，下面我们将深入分析。

首先观察一个协程示例：

function asnycJob() {
 // ...其他代码
 var f = yield readFile(fileA);
 // ...其他代码
}

引用阮一峰老师的原话：

上述代码中的 asyncJob 函数是一个协程，其核心奥秘在于 yield 命令。该命令标志着执行权将移交给其他协程，即 yield 是异步两个阶段的分界线。协程遇到 yield 命令时暂停执行，待执行权返回后，再从暂停处继续向后执行。其最大优势在于代码写法极其接近同步操作，若去除 yield 命令，代码几乎与同步逻辑完全一致。

此前未能理解的原因在于未仔细研读上述两点，今日重新审视后豁然开朗。关键点如下：

首先，asyncJob 方法本身即为一个协程。

yield 的作用类似于 return，它会返回当前程序的执行状态。

当程序执行至 yield 处时，会挂起并等待后续指令返回后继续执行。

在挂起期间，程序可以去执行其他协程函数。

Generator 函数是 ES6 对协程函数的具体实现。

Generator 函数的核心特征在于能够暂停代码的执行流程。

与普通函数类似，遇到 yield 关键字时，代码执行会暂停。

与普通函数的区别在于，Generator 函数不直接返回结果值，而是返回一个指针对象。

通过调用该指针的 next 方法，可以移动指针指向下一个 yield 关键字的位置。

换言之，Generator 函数的分阶段执行是由 next 方法控制的。

Generator 函数的执行与控制

使用 Generator 函数后，我们的代码会发生怎样的变化？

fangction* gen(){
  var url = 'user/get/info';
  var data = yield $.get({url:url});
  console.log(data.userName);
}

开发者无需担忧远程接口的返回时机，完全可以按照同步代码的逻辑进行编写。

但 Generator 函数也存在局限性：它使单步操作变得简洁，但对整体流程的管理却不够便捷。

上述示例具体如何执行？

var g = gen();
g.next();
g.next();

next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，都会返回一个对象。

该对象包含当前阶段的信息，即 value 属性和 done 属性。value 属性表示 yield 语句后表达式的值，代表当前阶段的返回值。

done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有后续阶段。

你需要连续执行两次 .next 方法，才能将 Generator 函数完全执行完毕。

关于如何自动化管理异步任务的流程，则需要借助 co 库、thunk 函数或 async/await 语法。

参考原文：《Generator 函数的含义与用法》。

感兴趣的朋友可以使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

更多关于 JavaScript 相关内容可查看本站专题：《JavaScript 常用函数技巧汇总》、《javascript 面向对象入门教程》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》及《JavaScript 数学运算用法总结》。

希望本文所述的 JavaScript 程序设计内容能对大家有所帮助。