当我用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
会给...
未捕获的TypeError:非法调用
在Chrome中。为什么?
在您的代码中,您正在将本机方法分配给自定义对象的属性。当您调用时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
另一个选择是使用Function.prototype.bind(),它是ES5标准的一部分,并且在所有现代浏览器中都可用。
var _raf = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var support = {
animationFrame: _raf ? _raf.bind(window) : null
};
您还可以使用:
var obj = {
alert: alert.bind(window)
};
obj.alert('I´m an alert!!');
执行方法(即分配给对象的函数)时,可以在其中使用this
变量引用该对象,例如:
var obj = {
someProperty: true,
someMethod: function() {
console.log(this.someProperty);
}
};
obj.someMethod(); // logs true
如果将方法从一个对象分配给另一个对象,则其this
变量引用新对象,例如:
var obj = {
someProperty: true,
someMethod: function() {
console.log(this.someProperty);
}
};
var anotherObj = {
someProperty: false,
someMethod: obj.someMethod
};
anotherObj.someMethod(); // logs false
当您将requestAnimationFrame
方法分配window
给另一个对象时,也会发生同样的事情。诸如此类的本机功能具有内置保护,无法在其他上下文中执行它。
有一个Function.prototype.call()
函数,允许您在另一个上下文中调用一个函数。您只需要将它(将用作上下文的对象)作为此方法的第一个参数传递即可。例如alert.call({})
给出TypeError: Illegal invocation
。但是,alert.call(window)
工作正常,因为现在alert
在其原始范围内执行。
如果您使用这样.call()
的对象:
support.animationFrame.call(window, function() {});
它可以正常工作,因为它requestAnimationFrame
是在window
而不是您的对象的范围内执行的。
但是,.call()
每次使用时都想调用此方法,并不是一个很好的解决方案。相反,您可以使用Function.prototype.bind()
。它的作用与相似.call()
,但是它没有调用函数,而是创建了一个新函数,该函数将始终在指定的上下文中被调用。例如:
window.someProperty = true;
var obj = {
someProperty: false,
someMethod: function() {
console.log(this.someProperty);
}
};
var someMethodInWindowContext = obj.someMethod.bind(window);
someMethodInWindowContext(); // logs true
唯一的缺点Function.prototype.bind()
是它是ECMAScript 5的一部分,IE <= 8不支持它。幸运的是,MDN上有一个polyfill。
您可能已经知道,可以使用.bind()
始终requestAnimationFrame
在的上下文中执行window
。您的代码可能如下所示:
var support = {
animationFrame: (window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame).bind(window)
};
然后,您可以简单地使用support.animationFrame(function() {});
。
文章标签:google-chrome , html , javascript , typeerror
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!