我如何传递上下文到setTimeout?如果this.options.destroyOnHide在1000毫秒后,我想调用this.tip.destroy()。我该怎么做呢?
if (this.options.destroyOnHide) {
setTimeout(function() { this.tip.destroy() }, 1000);
}
当我尝试上面的时候,这指的是窗口。
我如何传递上下文到setTimeout?如果this.options.destroyOnHide在1000毫秒后,我想调用this.tip.destroy()。我该怎么做呢?
if (this.options.destroyOnHide) {
setTimeout(function() { this.tip.destroy() }, 1000);
}
当我尝试上面的时候,这指的是窗口。
编辑:总之,早在2010年,当这个问题被问到时,解决这个问题最常见的方法是保存一个引用到setTimeout函数调用的上下文,因为setTimeout执行函数时指向全局对象:
var that = this;
if (this.options.destroyOnHide) {
setTimeout(function(){ that.tip.destroy() }, 1000);
}
在一年前发布的ES5规范中,它引入了bind方法,这在最初的答案中没有被建议,因为它还没有被广泛支持,你需要填充程序才能使用它,但现在它无处不在:
if (this.options.destroyOnHide) {
setTimeout(function(){ this.tip.destroy() }.bind(this), 1000);
}
bind函数创建一个预先填充this值的新函数。
现在在现代JS中,这正是箭头函数在ES6中解决的问题:
if (this.options.destroyOnHide) {
setTimeout(() => { this.tip.destroy() }, 1000);
}
箭头函数本身没有this值,当您访问它时,您正在访问封闭词法作用域的this值。
HTML5也在2011年标准化了计时器,现在你可以将参数传递给回调函数:
if (this.options.destroyOnHide) {
setTimeout(function(that){ that.tip.destroy() }, 1000, this);
}
参见:
setTimeout -“this”问题
对于@CMS回答的函数包装器,有现成的快捷方式(语法糖)。(下面假设你想要的上下文是this.tip。)
ECMAScript 2015(所有常用浏览器和智能手机,Node.js 5.0.0+)
对于几乎所有的javascript开发(在2020年),你都可以使用粗箭头函数,这是ECMAScript 2015 (Harmony/ES6/ES2015)规范的一部分。
与函数表达式相比,箭头函数表达式(也称为胖箭头函数)具有更短的语法,并且在词法上绑定this值[…]。
(param1, param2, ...rest) => { statements }
在你的情况下,试试这个:
if (this.options.destroyOnHide) {
setTimeout(() => { this.tip.destroy(); }, 1000);
}
ECMAScript 5(旧的浏览器和智能手机,Node.js)和Prototype.js
如果你的目标浏览器兼容ECMA-262,第5版(ECMAScript 5)或Node.js,这(在2020年)意味着所有常用浏览器以及旧浏览器,你可以使用Function.prototype.bind。您可以选择传递任何函数参数来创建部分函数。
fun.bind(thisArg[, arg1[, arg2[, ...]]])
同样,在你的情况下,试试这个:
if (this.options.destroyOnHide) {
setTimeout(this.tip.destroy.bind(this.tip), 1000);
}
Prototype中也实现了相同的功能(还有其他库吗?)
如果你想要自定义向后兼容性,可以像这样实现Function.prototype.bind(但请注意注释)。
jQuery
如果你已经在使用jQuery 1.4+,有一个现成的函数可以显式地设置函数的this上下文。
jQuery.proxy():接受一个函数并返回一个总是具有特定上下文的新函数。
$.proxy(function, context[, additionalArguments])
在你的情况下,试试这个:
if (this.options.destroyOnHide) {
setTimeout($.proxy(this.tip.destroy, this.tip), 1000);
}
Underscore.js, lodash
它可以在Underscore.js中使用,也可以在lodash中使用,如_.bind(…)1,2
bind将一个函数绑定到一个对象,这意味着无论何时调用函数,this的值都将是该对象。可选地,将参数绑定到函数以预填充它们,也称为部分应用程序。
_.bind(function, object, [*arguments])
在你的情况下,试试这个:
if (this.options.destroyOnHide) {
setTimeout(_.bind(this.tip.destroy, this.tip), 1000);
}
用
在ie以外的浏览器中,你可以在延迟后将参数一起传递给函数:
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
你可以这样做:
var timeoutID = window.setTimeout(function (self) {
console.log(self);
}, 500, this);
就性能而言,这比作用域查找(将其缓存到timeout / interval表达式之外的变量中),然后创建闭包(通过使用$。proxy或Function.prototype.bind)。
代码使它在ie工作从Webreflection:
/*@cc_on
(function (modifierFn) {
// you have to invoke it as `window`'s property so, `window.setTimeout`
window.setTimeout = modifierFn(window.setTimeout);
window.setInterval = modifierFn(window.setInterval);
})(function (originalTimerFn) {
return function (callback, timeout){
var args = [].slice.call(arguments, 2);
return originalTimerFn(function () {
callback.apply(this, args)
}, timeout);
}
});
@*/
如果你使用下划线,你可以使用bind。
E.g.
if (this.options.destroyOnHide) {
setTimeout(_.bind(this.tip.destroy, this), 1000);
}
注意:这将不能在IE中工作
var ob = {
p: "ob.p"
}
var p = "window.p";
setTimeout(function(){
console.log(this.p); // will print "window.p"
},1000);
setTimeout(function(){
console.log(this.p); // will print "ob.p"
}.bind(ob),1000);
如果你使用的是TypeScript,你可以将函数作为参数传递,就像这样:
setTimeout(this.tip.destroy, 1000);
this context会被赋值就像你在JavaScript的箭头函数中封装调用一样。