从 setTimeout 调用生成器函数 [重复]

Question

以下 js 代码在 firefox、chrome 和 nodejs 的开发者控制台中也失败。不知道为什么？

function* x() {}
let y = x()
setTimeout(y.next, 100)

火狐浏览器出错

TypeError: CallGeneratorMethodIfWrapped 方法调用不兼容 窗口

chrome 中的错误

Uncaught TypeError: Method [Generator].prototype.next 调用 接收器不兼容# 在下一个（）

node.js 中的错误

timers.js:475
    timer._onTimeout();
          ^

TypeError: Method [Generator].prototype.next called on incompatible receiver #<Timeout>
    at Timeout.next [as _onTimeout] (<anonymous>)
    at ontimeout (timers.js:475:11)
    at tryOnTimeout (timers.js:310:5)
    at Timer.listOnTimeout (timers.js:270:5)

Answer 1

当您将y.next 作为要调用的函数传递时，对象y 将丢失。你可以这样做：

setTimeout(y.next.bind(y), 100)

当您传递y.next 时，它会到达y 对象并获取对next 函数的引用，它只传递对next 函数的引用。它是对next 函数的通用引用，它与y 对象完全没有关联。然后，稍后当setTimeout() 触发时，它只是单独调用next 函数，并且在函数调用中不使用对象y。这意味着当next 执行时，this 的值将是undefined，而不是适当的y 对象。

你可以想象它这样做：

let x = y.next;
setTimeout(x, 100);

与y 无关的内容已传递给setTimeout()。它将调用next() 方法作为普通函数。如果你这样做，你可能会看到同样的问题：

let x = y.next;
x();

根据其设计，setTimeout() 只调用 fn() 中的函数。它不像y.next() 那样调用方法。要调用方法，必须在实际函数调用中使用对象引用，如您在y.next() 中所见。 setTimeout() 不会那样做。它只是调用函数。

所以，.bind() 创建了一个小的存根函数，然后它将为您正确调用它。因此，如上所示使用它与此类似：

let x = function() {
    y.next();
}
setTimeout(x, 100);

或者，内联版本：

setTimeout(function() {
    y.next();
}, 100);