为什么setTimeout（location.reload）抛出TypeError？

Question

我试图理解这段代码的奇怪行为：

window.setTimeout(window.location.reload, 200);

• 在Firefox中会引发TypeError：

    

  TypeError：＆＃39;重新加载＆＃39;调用了一个没有实现接口Location的对象。

• 在Chromium中会抛出另一个TypeError：

    

  未捕获的TypeError：非法调用

这两种选择工作正常：

• window.setTimeout('window.location.reload()', 200);
• window.setTimeout(function(){window.location.reload()}, 200)

为什么？

Answer 1

这是因为window.location.reload将被取消上下文，因此实际函数reload()没有对location对象的任何引用。

在JavaScript中，如果您调用函数foo.bar()，则上下文为foo，因此this引用函数foo中的bar。

但是，如果您指定var a = foo.bar然后调用a()（仍然是相同的功能），则它将没有上下文，因此this将是未定义的。将函数作为方法参数传递时会发生这种情况。

解决此问题的常用方法是绑定上下文：

window.setTimeout(window.location.reload.bind(window.location), 200);

这确保了在window.location的上下文中始终会调用该函数，无论它是如何被调用的。

Mozilla docs中有一个很好的例子。