ES6生成器,看似同步的异步流程控制表达风格

  • ES6生成器,看似同步的异步流程控制表达风格已关闭评论
  • 50 次浏览
  • A+
所属分类:Web前端
摘要

本文分享自华为云社区《3月阅读周·你不知道的JavaScript | ES6生成器,看似同步的异步流程控制表达风格》,作者: 叶一一。

本文分享自华为云社区《3月阅读周·你不知道的JavaScript | ES6生成器,看似同步的异步流程控制表达风格》,作者: 叶一一。

生成器

打破完整运行

JavaScript开发者在代码中几乎普遍依赖的一个假定:一个函数一旦开始执行,就会运行到结束,期间不会有其他代码能够打断它并插入其间。

ES6引入了一个新的函数类型,它并不符合这种运行到结束的特性。这类新的函数被称为生成器。

var x = 1;  function foo() {   x++;   bar(); // <-- 这一行在x++和console.log(x)语句之间运行   console.log('x:', x); }  function bar() {   x++; }  foo(); // x: 3

如果bar()并不在那里会怎样呢?显然结果就会是2,而不是3。最终的结果是3,所以bar()会在x++和console.log(x)之间运行。

但JavaScript并不是抢占式的,(目前)也不是多线程的。然而,如果foo()自身可以通过某种形式在代码的这个位置指示暂停的话,那就仍然可以以一种合作式的方式实现这样的中断(并发)。

下面是实现合作式并发的ES6代码:

var x = 1;  function* foo() {   x++;   yield; // 暂停!   console.log('x:', x); }  function bar() {   x++; } // 构造一个迭代器it来控制这个生成器 var it = foo();  // 这里启动foo()! it.next(); console.log('x:', x); // 2 bar(); console.log('x:', x); // 3 it.next(); // x: 3

  • it = foo()运算并没有执行生成器*foo(),而只是构造了一个迭代器(iterator),这个迭代器会控制它的执行。
  • *foo()在yield语句处暂停,在这一点上第一个it.next()调用结束。此时*foo()仍在运行并且是活跃的,但处于暂停状态。
  • 最后的it.next()调用从暂停处恢复了生成器*foo()的执行,并运行console.log(..)语句,这条语句使用当前x的值3。

生成器就是一类特殊的函数,可以一次或多次启动和停止,并不一定非得要完成。

输入和输出

生成器函数是一个特殊的函数,它仍然有一些函数的基本特性。比如,它仍然可以接受参数(即输入),也能够返回值(即输出)。

function* foo(x, y) {   return x * y; }  var it = foo(6, 7); var res = it.next();  res.value; // 42

向*foo(..)传入实参6和7分别作为参数x和y。*foo(..)向调用代码返回42。

多个迭代器

每次构建一个迭代器,实际上就隐式构建了生成器的一个实例,通过这个迭代器来控制的是这个生成器实例。

同一个生成器的多个实例可以同时运行,它们甚至可以彼此交互:

function* foo() {   var x = yield 2;   z++;   var y = yield x * z;   console.log(x, y, z); }  var z = 1;  var it1 = foo(); var it2 = foo();  var val1 = it1.next().value; // 2 <-- yield 2 var val2 = it2.next().value; // 2 <-- yield 2  val1 = it1.next(val2 * 10).value; // 40   <-- x:20,  z:2 val2 = it2.next(val1 * 5).value; // 600  <-- x:200, z:3  it1.next(val2 / 2); // y:300 // 20300 3 it2.next(val1 / 4); // y:10 // 200 10 3

简单梳理一下执行流程:

(1) *foo()的两个实例同时启动,两个next()分别从yield 2语句得到值2。

(2) val2 * 10也就是2 * 10,发送到第一个生成器实例it1,因此x得到值20。z从1增加到2,然后20 * 2通过yield发出,将val1设置为40。

(3) val1 * 5也就是40 * 5,发送到第二个生成器实例it2,因此x得到值200。z再次从2递增到3,然后200 * 3通过yield发出,将val2设置为600。

(4) val2 / 2也就是600 / 2,发送到第一个生成器实例it1,因此y得到值300,然后打印出x y z的值分别是20300 3。

(5) val1 / 4也就是40 / 4,发送到第二个生成器实例it2,因此y得到值10,然后打印出x y z的值分别为200 10 3。

生成器产生值

生产者与迭代器

假定你要产生一系列值,其中每个值都与前面一个有特定的关系。要实现这一点,需要一个有状态的生产者能够记住其生成的最后一个值。

迭代器是一个定义良好的接口,用于从一个生产者一步步得到一系列值。JavaScript迭代器的接口,就是每次想要从生产者得到下一个值的时候调用next()。

可以为数字序列生成器实现标准的迭代器接口:

var something = (function () {   var nextVal;    return {     // for..of循环需要     [Symbol.iterator]: function () {       return this;     },      // 标准迭代器接口方法     next: function () {       if (nextVal === undefined) {         nextVal = 1;       } else {         nextVal = 3 * nextVal + 6;       }        return { done: false, value: nextVal };     },   }; })();  something.next().value; // 1 something.next().value; // 9 something.next().value; // 33 something.next().value; // 105

next()调用返回一个对象。这个对象有两个属性:done是一个boolean值,标识迭代器的完成状态;value中放置迭代值。

iterable

iterable(可迭代),即指一个包含可以在其值上迭代的迭代器的对象。

从ES6开始,从一个iterable中提取迭代器的方法是:iterable必须支持一个函数,其名称是专门的ES6符号值Symbol.iterator。调用这个函数时,它会返回一个迭代器。通常每次调用会返回一个全新的迭代器,虽然这一点并不是必须的。

var a = [1, 3, 5, 7, 9];  for (var v of a) {   console.log(v); } // 1 3 5 7 9

上面的代码片段中的a就是一个iterable。for..of循环自动调用它的Symbol.iterator函数来构建一个迭代器。

for (var v of something) {   .. }

for..of循环期望something是iterable,于是它寻找并调用它的Symbol.iterator函数。

生成器迭代器

可以把生成器看作一个值的生产者,我们通过迭代器接口的next()调用一次提取出一个值。

生成器本身并不是iterable,当你执行一个生成器,就得到了一个迭代器:

function *foo(){ .. }  var it = foo();

可以通过生成器实现前面的这个something无限数字序列生产者,类似这样:

function* something() {   var nextVal;    while (true) {     if (nextVal === undefined) {       nextVal = 1;     } else {       nextVal = 3 * nextVal + 6;     }      yield nextVal;   } }

因为生成器会在每个yield处暂停,函数*something()的状态(作用域)会被保持,即意味着不需要闭包在调用之间保持变量状态。

异步迭代生成器

function foo(x, y) {   ajax('http://some.url.1/? x=' + x + '&y=' + y, function (err, data) {     if (err) {       // 向*main()抛出一个错误       it.throw(err);     } else {       // 用收到的data恢复*main()       it.next(data);     }   }); }  function* main() {   try {     var text = yield foo(11, 31);     console.log(text);   } catch (err) {     console.error(err);   } }  var it = main();  // 这里启动! it.next();

在yield foo(11,31)中,首先调用foo(11,31),它没有返回值(即返回undefined),所以发出了一个调用来请求数据,但实际上之后做的是yield undefined。

这里并不是在消息传递的意义上使用yield,而只是将其用于流程控制实现暂停/阻塞。实际上,它还是会有消息传递,但只是生成器恢复运行之后的单向消息传递。

看一下foo(..)。如果这个Ajax请求成功,我们调用:

it.next(data);

这会用响应数据恢复生成器,意味着暂停的yield表达式直接接收到了这个值。然后随着生成器代码继续运行,这个值被赋给局部变量text。

总结

我们来总结一下本篇的主要内容:

  • 生成器是ES6的一个新的函数类型,它并不像普通函数那样总是运行到结束。取而代之的是,生成器可以在运行当中(完全保持其状态)暂停,并且将来再从暂停的地方恢复运行。
  • yield/next(..)这一对不只是一种控制机制,实际上也是一种双向消息传递机制。yield ..表达式本质上是暂停下来等待某个值,接下来的next(..)调用会向被暂停的yield表达式传回一个值(或者是隐式的undefined)。
  • 在异步控制流程方面,生成器的关键优点是:生成器内部的代码是以自然的同步/顺序方式表达任务的一系列步骤。其技巧在于,把可能的异步隐藏在了关键字yield的后面,把异步移动到控制生成器的迭代器的代码部分。
  • 生成器为异步代码保持了顺序、同步、阻塞的代码模式,这使得大脑可以更自然地追踪代码,解决了基于回调的异步的两个关键缺陷之一。

 

点击关注,第一时间了解华为云新鲜技术~