Javascript 使用函数继承时setTimeout不起作用_Javascript_Html_Oop

Javascript 使用函数继承时setTimeout不起作用

javascript html oop

Javascript 使用函数继承时setTimeout不起作用,javascript,html,oop,Javascript,Html,Oop,在阅读了Douglas Crockford的优秀部分JavaScript之后，我尝试实现这样一个计时器。它有私有变量秒、小时、分钟和三个公共方法：开始、停止和继续： var timer = function() { var that = {}; var seconds = 0; var hours = 0; var minutes = 0; var myTimer;

在阅读了Douglas Crockford的优秀部分JavaScript之后，我尝试实现这样一个计时器。它有私有变量秒、小时、分钟和三个公共方法：开始、停止和继续：

var timer = function() {
            var that = {};
            var seconds = 0;
            var hours = 0;
            var minutes = 0;
            var myTimer;

            that.getTime = function() {
                var time = hours + " : " + minutes + " : " + seconds;
                return time;
            }
            that.start = function() {
                seconds += 1;           
                if(seconds >= 60) {
                    seconds -= 60;
                    minutes += 1;
                }
                if(minutes == 60)
                    hours += 1;
                document.getElementById('hours').innerHTML = hours;
                document.getElementById('minutes').innerHTML = minutes;
                document.getElementById('seconds').innerHTML = seconds; 
                myTimer = setTimeout(function() {
                    start();
                }, 1000);
            };

            that.stop = function() {
                clearTimeout(myTimer);
            }
            that.reset = function() {
                seconds = 0;
                hours = 0;
                minutes = 0;
                clearTimeout(myTimer);
                document.getElementById('hours').innerHTML = hours;
                document.getElementById('minutes').innerHTML = minutes;
                document.getElementById('seconds').innerHTML = seconds;
            }
            return that;
        };

然后，我开始：

<body onload="var t = timer();t.start();">

    <h1>Digital Clock</h1>
    <div id="wrap">
        <div>
            <ul>
                <li id="hours"></li>
                <li> : </li>
                <li id="minutes"></li>
                <li> : </li>
                <li id="seconds"></li>
            </ul>
        </div>
    </div>
    <br/>
</body>

谁能告诉我我犯了什么错误

更新：最后，我发现了问题。当你从另一个函数中使用一个函数时，比如说，内部函数，这是全局函数，而不是外部函数。因此，在语句start中，js将尝试在全局对象中查找函数。当然，没有这样的功能。在这里，我找到了两个解决方案：

用那个

myTimer=setTimeoutfunction{ 那就是开始； }, 1000;

保存上下文：

var timerInstance=此

myTimer=setTimeoutfunction{ timerInstance.start； }, 1000;

希望这能对您有所帮助。

这是一个JSFIDLE，其中包含您修改过的代码：

我用这个代替了它，它代表你的定时器，我用window.timer代替var定时器

稍后编辑：这是已更正代码的一个版本，因此它的作用就像一个计时器。您的代码中有一些错误

您应该学习如何使用控制台查看程序生成的错误。您通常可以通过在浏览器或Google中按F12来完成此操作。首先，您应该在start和continue函数中使用this.start，而不仅仅是start。您还应该将setTimeout的结果分配给myTimer，以使停止功能正常工作。@Matt在这个特定实例中，是that.start，不是this.start。这种继承的实现是完全没有必要的，我不知道他们为什么要教它。@joncys:你说得对。捡得好；虽然我无法更正我的原始注释，因为它现在已经超出了5分钟的时间：是的，我已经成功地实现了没有此模板的代码，但我只想了解函数继承是如何工作的，所以我尝试遵循此模板。但这里的确切问题是什么？谢谢你，但是你知道为什么它不起作用吗？也许你对我使用这个模板的方式很陌生，但当我在读这本书时，我只想尽可能多地了解：我不确定。这可能不是因为这个，而是因为var timer而不是window.timer。下面是正在工作的JSFIDLE，更新内容如下：谢谢！！我发现了错误，这是Crockford在他的书中所说的，当一个函数用这个模式方法调用模式调用时，它绑定到全局对象。这是语言设计中的一个错误。如果语言设计正确，当调用内部函数时，它仍然会绑定到外部函数的this变量。此错误的结果是，方法无法使用内部函数来帮助其完成工作，因为内部函数不共享方法对对象的访问权限，因为它的this绑定到错误的值。。。