在对象原型方法的setInterval / setTimeout内部引用“ this”

Question

通常，在setInterval中引用“ this”时，我会分配一个替代的“ self”引用。是否可以在原型方法的上下文中完成类似的任务？以下代码错误。

function Foo() {}
Foo.prototype = {
    bar: function () {
        this.baz();
    },
    baz: function () {
        this.draw();
        requestAnimFrame(this.baz);
    }
};

Answer 1

与Python之类的语言不同，Javascript方法忘记了将其提取并传递到其他地方后才使用的方法。你可以

将方法调用包装在匿名函数中

这样，访问baz属性并调用它是同时发生的，这是this在方法调用中正确设置的必要条件。

您将需要this将外部函数中的from 保存到一个辅助变量中，因为内部函数将引用另一个this对象。

var that = this;
setInterval(function(){
    return that.baz();
}, 1000);

将方法调用包装在粗箭头功能内

在实现箭头功能功能的Javascript实现中，可以通过使用fatarrow语法以更简洁的方式编写上述解决方案：

setInterval( () => this.baz(), 1000 );

粗箭头匿名函数保留了this周围函数的，因此无需使用该varthat=this技巧。要看到，如果你可以使用此功能，请咨询兼容性表像这一个。

使用绑定功能

最后一种选择是使用诸如Function.prototype.bind之类的函数或您喜欢的Javascript库中的等效函数。

setInterval( this.baz.bind(this), 1000 );

//dojo toolkit example:
setInterval( dojo.hitch(this, 'baz'), 100);