当你执行一个方法(即分配给一个对象的函数)时,你可以在其中使用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
给另一个对象时,也会发生同样的事情。本机函数(例如 this)具有内置保护,可防止在其他上下文中执行它。
有一个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() {});
.