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

JavaScript Timer Class: method coming as undefined in browser web consoles

本文关键字：控制台 未定义 方法 web 浏览器 Timer JavaScript      更新时间：2023-09-26

我目前正在学习和练习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.";  
    }
}

上面是倒计时的主要函数，它用适当的信息。

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

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

问题在尝试将其构建为一个类之前，一切都很好，并且符合预期。我可以在一个页面上生成多个计时器，唯一的缺点是一次只能运行一个。在尝试将其构建为"类"之后，它不再工作。在做了几个小时之后，我收到的唯一点击来自Firefox和Chrome网络控制台，它们喜欢这条线：

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

并声明更新未定义。

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

如果我可以额外询问为什么我会出现错误，如果我要以适当的方式创建这个计时器对象。

非常感谢。

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

当您像这样使用setInterval时，更新函数的上下文是window对象，而不是当前的this（Timer）。这就是为什么它是未定义的。

在尝试将其构建为一个类之前，一切都很好如预期。

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

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

var context = this;
this.timer = setInterval(function(){
                             context.update();
                         }, 1000);
相关文章：