将正确的“ this”上下文传递给setTimeout回调?

2020/10/09 05:01 · javascript ·  · 0评论

如何传递上下文setTimeout我想打电话this.tip.destroy(),如果this.options.destroyOnHide在1000毫秒。我怎样才能做到这一点?

if (this.options.destroyOnHide) {
     setTimeout(function() { this.tip.destroy() }, 1000);
} 

当我尝试上述操作时,this指的是窗口。

编辑:总而言之,早在2010年,当有人问这个问题时,解决此问题的最常用方法是保存对进行setTimeout函数调用的上下文的引用,因为setTimeout执行该函数时要this指向全局对象:

var that = this;
if (this.options.destroyOnHide) {
     setTimeout(function(){ that.tip.destroy() }, 1000);
} 

在一年前发布的ES5规范中,它引入了该bind方法,但原始答案中并未建议使用方法,因为该方法尚未得到广泛支持,您需要使用polyfills来使用它,但现在无处不在:

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);
}

也可以看看:

功能包装器@CMS有现成的快捷方式(语法糖)。(下面假设您想​​要的上下文是this.tip。)


ECMAScript 5当前的浏览器,Node.js)和Prototype.js

如果您的目标浏览器与ECMA-262,第5版(ECMAScript 5)Node.js兼容,则可以使用Function.prototype.bind您可以选择传递任何函数参数来创建部分函数

fun.bind(thisArg[, arg1[, arg2[, ...]]])

同样,请尝试以下操作:

if (this.options.destroyOnHide) {
    setTimeout(this.tip.destroy.bind(this.tip), 1000);
}

原型(其他库?)实现了相同的功能

Function.prototype.bind如果您要自定义向后兼容,则可以这样实现(但请注意说明)。


ECMAScript 2015某些浏览器,Node.js 5.0.0+)

对于尖端开发(2015年),您可以使用胖箭头功能,该功能ECMAScript 2015(Harmony / ES6 / ES2015)规范的一部分示例)。

一个箭头函数表达式(也称为脂肪箭头功能相比函数表达式)具有较短的语法和词汇结合this值[...]。

(param1, param2, ...rest) => { statements }

在您的情况下,请尝试以下操作:

if (this.options.destroyOnHide) {
    setTimeout(() => { this.tip.destroy(); }, 1000);
}

jQuery的

如果您已经在使用jQuery 1.4+,则有一个现成的函数可以显式设置函数的this上下文。

jQuery.proxy():获取一个函数并返回一个始终具有特定上下文的新函数。

$.proxy(function, context[, additionalArguments])

在您的情况下,请尝试以下操作:

if (this.options.destroyOnHide) {
    setTimeout($.proxy(this.tip.destroy, this.tip), 1000);
}

Underscore.jslodash

它的问世在Underscore.js,以及lodash,如_.bind(...)12

bind将函数绑定到对象,这意味着无论何时调用该函数,的值this都是该对象。(可选)将参数绑定到函数以预填充它们,也称为部分应用程序。

_.bind(function, object, [*arguments])

在您的情况下,请尝试以下操作:

if (this.options.destroyOnHide) {
    setTimeout(_.bind(this.tip.destroy, this.tip), 1000);
}

在Internet Explorer以外的浏览器中,可以在延迟后将参数一起传递给函数:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

因此,您可以执行以下操作:

var timeoutID = window.setTimeout(function (self) {
  console.log(self); 
}, 500, this);

就性能而言,这比范围查找(将其缓存this到timeout / interval表达式之外的变量中)然后创建闭包(使用$.proxyFunction.prototype.bind要好

通过Webreflection使它在IE中起作用的代码

/*@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);
    }
});
@*/

注意:这在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);

如果您正在使用underscore,则可以使用bind

例如

if (this.options.destroyOnHide) {
     setTimeout(_.bind(this.tip.destroy, this), 1000);
}
本文地址:http://javascript.askforanswer.com/jiangzhengquede-thisshangxiawenchuandigeisettimeouthuidiao.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!