Chrome 中的“未捕获类型错误：非法调用”

Question

当我使用 requestAnimationFrame 用下面的代码做一些本地支持的动画时：

 var support = {
    animationFrame: window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame
};

support.animationFrame(function() {}); //error

support.animationFrame.call(window, function() {}); //right

直接调用 support.animationFrame 会给出…

未捕获的类型错误：非法调用

在铬中。为什么？

原文由 stefan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的代码中，您将本地方法分配给自定义对象的属性。当您调用 support.animationFrame(function () {}) 时，它在当前对象（即支持）的上下文中执行。为了使本机 requestAnimationFrame 函数正常工作，它必须在 window 的上下文中执行。

所以这里正确的用法是 support.animationFrame.call(window, function() {}); 。

同样的情况也发生在 alert 上：

 var myObj = {
  myAlert : alert //copying native alert to an object
};

myObj.myAlert('this is an alert'); //is illegal
myObj.myAlert.call(window, 'this is an alert'); // executing in context of window

另一种选择是使用 Function.prototype.bind() ，它是 ES5 标准的一部分，适用于所有现代浏览器。

 var _raf = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;

var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

原文由 Nemoy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您还可以使用：

 var obj = {
    alert: alert.bind(window)
};
obj.alert('I´m an alert!!');

原文由 afmeva 发布，翻译遵循 CC BY-SA 3.0 许可协议