javascript - 通过函数了解 ES6 中的 Yield

Question

所以我理解生成器的概念以及关键字“yield”在 JavaScript 中代表什么，但是当我在 Chrome 中使用它时(Mac OS X 10.10.3 上的版本 43.0.2357.81(64 位))我遇到了我不明白其结果的情况。

下面是一个yield工作原理的示例:

function* test() {
    var i = 0;
    while ( i < 4 ) {
        yield ++index;
    }
}

tester = test();
console.log( tester.next().value ); //1
console.log( tester.next().value ); //2
console.log( tester.next().value ); //3
console.log( tester.next().value ); //4
console.log( tester.next().value ); //undefined

结果正如我所料。按照 MDN Documentation 中的示例我发现您可以使用yield* 来使用另一个生成器函数。根据我的理解，我期望将yield与函数一起使用应该返回该函数的值。这是我的例子:

function* test() {
    var i = 0;
    while ( i < 4 ) {
        ++i;
        yield function( a ) { return a + i; };
    }
}

tester = test();
console.log( tester.next().value ); //undefined
console.log( tester.next().value ); //undefined
console.log( tester.next().value ); //undefined
console.log( tester.next().value ); //undefined
console.log( tester.next().value ); //undefined

谁能帮我理解为什么返回的值不是一个函数？我查看了，但在生成器规范中我是否遗漏了一些强制该值成为基元的内容？

Answer 1

让您的代码在Traceur中工作。请随意重新粘贴并检查。请记住在右上角的选项中打开“实验”。

function* test() {
    var i = 0;
    while ( i < 4 ) {
        ++i;
        yield function( a ) { return a + i; };
    }
    return "done"
}

let tester = test();
console.log( tester.next().value ); //fn
console.log( tester.next().value ); //fn
console.log( tester.next().value ); //fn
console.log( tester.next().value ); //fn
console.log( tester.next().value ); //string literal "done"

仅结果差异:在记录之前使用 let 或 var 声明 tester。

我在这里猜测，但这看起来像是转换器中的错误？没有关键字的分配应该可以正常工作，我不相信 ECMA6 在这里引入了任何限制。它会破坏太多。

这是转译的代码:

$traceurRuntime.ModuleStore.getAnonymousModule(function() {
  "use strict";
  var $__0 = $traceurRuntime.initGeneratorFunction(test);
  function test() {
    var i;
    return $traceurRuntime.createGeneratorInstance(function($ctx) {
      while (true)
        switch ($ctx.state) {
          case 0:
            i = 0;
            $ctx.state = 11;
            break;
          case 11:
            $ctx.state = (i < 4) ? 5 : 7;
            break;
          case 5:
            ++i;
            $ctx.state = 6;
            break;
          case 6:
            $ctx.state = 2;
            return function(a) {
              return a + i;
            };
          case 2:
            $ctx.maybeThrow();
            $ctx.state = 11;
            break;
          case 7:
            $ctx.returnValue = "done";
            $ctx.state = -2;
            break;
          default:
            return $ctx.end();
        }
    }, $__0, this);
  }
  tester = test();
  console.log(tester.next().value);
  console.log(tester.next().value);
  console.log(tester.next().value);
  console.log(tester.next().value);
  console.log(tester.next().value);
  return {};
});
//# sourceURL=traceured.js  

.initGeneratorFunction() 正在接受输入，但 test 不接受 hoisted当这样分配时。所以它似乎默默地抛出。看起来这只是一个转译器的事情，因为 let isn't actually supposed to hoist ，只是声明它允许转译代码具有提升的变量。

有更多 ES6 经验的人可以确认这是否是注释中的错误吗？也许转译器需要某种语法，或者这是严格模式的要求？

摘要:

看起来你的理解很好，只是当前转译器环境的一个怪癖。声明变量可能是一个很好的做法，Team Awesome(即 AirBnB )表示 const 是一个不错的选择!