5

在 Chrome 中，我首先使用 AudioContext 创建一个连续的音调：

var audioCtx = new (window.AudioContext || window.webkitAudioContext);

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.start();

现在我想在几毫秒后停止它。所以我这样做：

setTimeout(oscillator.stop, 500)

这将返回错误Uncaught TypeError: Illegal invocation。

但是，如果我这样做；

setTimeout(function(){oscillator.stop()}, 500)

它工作正常。

我现在想知道为什么第一个不起作用并返回错误。这似乎是执行此操作的直接方法。

4

1 回答 1

9

您的原始代码不起作用，因为该stop函数在setTimeout没有任何上下文的情况下传递给它 - 它不知道它应该对哪个对象起作用。如果你像这样调用它：

oscillator.stop();

然后在 内stop，将特殊变量this设置为 所指向的对象oscillator。但是如果你这样引用它：

var x = oscillator.stop;

该函数实际上并未被调用。相反，对函数的引用只是从其他地方提取oscillator和存储。该函数不记得它来自哪里，并且可以同时存储在许多不同的变量或对象属性中。例如：

var x = {};
x.foo = oscillator.stop;
x.foo();

最后一行调用stop的上下文为x(this设置为x) 而不是oscillator。（函数的主体会导致错误，因为stop假设它的上下文看起来像什么，但调用本身是合法的。）或者，如果你这样做：

var foo = oscillator.stop;
foo();

然后stop将仅使用默认上下文调用。在严格模式下，this将设置为undefined，在非严格模式下，this将设置为window。

当你这样做时：

setTimeout(function(){oscillator.stop()}, 500)

匿名函数stop使用适当的上下文调用。如果按照@elclanrs 在评论中的建议，您可以这样做：

setTimeout(oscillator.stop.bind(oscillator), 500)

它实际上是同一件事：创建了一个匿名函数，该函数stop使用oscillator.

于 2015-04-15T04:06:22.133 回答