Chrome中的“Uncaught TypeError：非法调用”

当我使用requestAnimationFrame来做一些原生支持的animation和下面的代码：

 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会给…

Uncaught TypeError：非法调用

在Chrome中。 为什么？

Answer 1

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

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

警报也一样：

 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 

另一种select是使用Function.prototype.bind（） ，它是ES5标准的一部分，可在所有现代浏览器中使用。

 var _raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame; var support = { animationFrame: _raf ? _raf.bind(window) : null }; 

Answer 2

你也可以使用：

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

Answer 3

当你执行一个方法（即分配给一个对象的函数）时，你可以使用thisvariables来引用这个对象，例如：

 var obj = { someProperty: true, someMethod: function() { console.log(this.someProperty); } }; obj.someMethod(); // logs true