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（）每秒调用main函数。

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

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

1 个答案: