Question

我正在尝试使用重复功能定义Javascript 类，但我无法让它工作：

var Repeater = function() {
    this.init.apply(this, arguments);
};

Repeater.prototype = {
    run: 0, // how many runs
    interval: 5, // seconds

    init: function() {
        this.repeat();
    },

    repeat: function() {
        console.log(++this.run);
        setTimeout(this.repeat, this.interval * 1000);
    }
};

var repeater = new Repeater();

应该怎么做？

Answer 1

试试这段代码：

var Repeater = function() {
    this.run = 0;  // how many runs
    this.interval = 5; // seconds
    this.init.apply(this, arguments);
};

Repeater.prototype.init = function() {
    this.repeat();
}

Repeater.prototype.repeat = function() {
    var _this = this;
    console.log(++this.run);
    setTimeout(function () { _this.repeat() }, this.interval * 1000);
};

var repeater = new Repeater();

我已经将run和interval移动到构造函数中，因为如果你将它添加到prototype中，那么它将遍布所有实例。

您的问题在于seTimeout - 在您的代码中，此计时器为repeater设置了新范围，而this不再指向Repeater实例，而是指向Timeout实例。您需要缓存this（我称之为缓存_this）并将其调用为传递给setTimeout的新函数。

Answer 2

尝试这样：

var Repeater = function() {
    this.init.apply(this, arguments);
};

Repeater.prototype = {
    run: 0, // how many runs
    interval: 5, // seconds

    init: function() {
        this.repeat();
    },

    repeat: function() {
        console.log(++this.run);
        var that = this;
        setTimeout(function() {that.repeat()}, this.interval * 1000);
    }
};

var repeater = new Repeater();

您可以在此问题中详细了解this的行为：How does the "this" keyword work?

Answer 3

更改重复函数以在setTimeout调用中使用闭包，如下所示：

repeat: function() {
var ctx = this;
    console.log(++this.run);
    setTimeout(function(){ctx.repeat()}, this.interval * 1000);
}

您需要在这些场景中明确设置上下文 - 这就是ctx变量的用途

如何在Javascript原型中定义重复函数？

3 个答案: