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

IT技术 javascript scope lexical-scope
2021-02-05 10:34:44

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

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

与 Python 之类的语言不同,Javascript 方法在您提取它并将其传递到其他地方后会忘记它是一个方法。你可以

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

这样,访问baz属性和调用它是同时发生的,这对于this在方法调用中正确设置是必要的

您需要将this来自外部函数的保存在辅助变量中,因为内部函数将引用不同的this对象。

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

将方法调用包裹在一个粗箭头函数中

在实现箭头函数功能的Javascript 实现中,可以使用粗箭头语法以更简洁的方式编写上述解决方案:

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

胖箭头匿名函数保留了this来自周围函数的信息,因此无需使用该var that = this技巧。要查看您是否可以使用此功能,请查阅像这样的兼容性表

使用绑定函数

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

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

//dojo toolkit example:
setInterval( dojo.hitch(this, 'baz'), 100);
这是一篇关于thisjs的非常有用的文章dmitripavlutin.com/gentle-explanation-of-this-in-javascript
2021-03-16 10:34:44
9 年后......胖箭头功能很糟糕。谢谢!
2021-03-21 10:34:44

我做了一个代理类:)

function callback_proxy(obj, obj_method_name)
{
    instance_id = callback_proxy.instance_id++;
    callback_proxy.instances[instance_id] = obj;
    return eval('fn = function() { callback_proxy.instances['+instance_id+'].'+obj_method_name+'(); }');
}
callback_proxy.instance_id = 0;
callback_proxy.instances = new Array();

function Timer(left_time)
{
    this.left_time = left_time; //second
    this.timer_id;

    this.update = function()
    {
        this.left_time -= 1;

        if( this.left_time<=0 )
        {
            alert('fin!');
            clearInterval(this.timer_id);
            return;
        }
    }

    this.timer_id = setInterval(callback_proxy(this, 'update'), 1000);
}

new Timer(10);