JavaScript Timer 类：在浏览器 Web 控制台中未定义的方法

Question

我目前正在学习和练习 JavaScript。前几天我偶然发现了一些创建计时器的代码。我决定作为一个练习练习，尝试从中创建一个“类”并尝试创建多个可以同时运行的计时器对象可能会很有趣。我将所有这些代码保存在一个 .js 文件中，该文件来自主 html 页面。代码如下：

function Timer(length, id, s_name)
{
    this.mins = 0; //set to zero as input is only available in seconds at the moment
    this.field = id;
    this.secs  = length;
    this.name  = s_name;

}   

以上是我的班级声明。它需要我在创建对象时传递的 3 个参数。

  Timer.prototype.init = function()
    {
        //alert(this.field + this.secs + this.name); //test to see if values were initalized properly
        this.timer = setInterval("update()", 1000);
    }

以上是我初始化定时器的函数。我使用 setInterval() 每秒调用一次主函数。

Timer.prototype.update = function()
{

    this.timeField = document.getElementById(this.field);
        if (this.secs == 0)
    {
        if (this.mins == 0)
        {
            this.timeField.innerHTML = (this.name + ' is complete!');
            clearInterval(this.timer);
            alert(this.name + ' is complete!');
            return;
        }
        this.mins--;
        this.secs=59;       
    }
    else
        {
            this.secs--;

        }
    if(this.secs<10)
    {

        this.timeField.innerHTML = "Time left: " + this.mins + ":0" + this.secs + " before " + this.name + " is complete.";

    }
    else
    {
        this.timeField.innerHTML = "Time left: " + this.mins + ":" + this.secs + " before " + this.name + " is complete.";  
    }
}

上面是倒计时并更新html中相应id的主要函数 适当的信息。

在运行和创建计时器时，我只需使用以下内容：

temp = new Timer(30,'made_up_id','made_up_name');
temp.init();

问题 在尝试将其构建为一个类之前，一切都按预期正常工作。我可以在一个页面上生成多个计时器——唯一的缺点是一次只能运行一个。在尝试将其构建为“类”之后，它不再起作用。经过几个小时的工作，我收到的唯一一击来自喜欢这条线的 Firefox 和 Chrome 网络控制台：

this.timer = setInterval('update()', 1000);

并声明 更新未定义。

无论如何，经过大量研究，我对为什么会发生这种情况一无所知。我从我的研究中知道，从技术上讲，您不能在 javascript 中创建类，并且可能存在很多继承问题，但我不相信它会影响我在这里的小项目。

如果我可以另外询问我为什么会收到我遇到的错误，如果我打算以/适当的方式创建这个计时器对象。

非常感谢您。

Answer 1

this.timer = setInterval('update()', 1000);

当你像这样使用setInterval 时，更新函数的上下文是window 对象，而不是当前的this（定时器）。这就是它未定义的原因。

在尝试将其构建为一个类之前，一切正常，并且 符合预期。

我猜在这种情况下，您在全局范围（窗口）中定义了 update 函数并且它可以工作。

在你的情况下，像这样修复它：

var context = this;
this.timer = setInterval(function(){
                             context.update();
                         }, 1000);