Question

我是JavaScript的新手，并且不太了解原型制作过程。我坚持这个问题：

我想创建一个基于原型的秒表（用于进一步增强）。秒表适用于用户交互（开始/停止），并以秒为单位显示经过的时间。

通过将开始时间存储在instance属性中，并从实际时间中减去该值来计算已用时间。

我的问题是，在启动函数设置开始时间后，它会在调用更新函数时消失（因此更新函数根本没有得到起始值）。此后，当触发停止功能时，停止功能不会获得经过时间的值。

我的猜测是函数不是在实例上调用，而是在原型上调用。

请帮助我更好地了解此代码中的原型和实例的一般情况，并帮助我找到问题和解决方案。谢谢！

var StopWatch = function () { 
    this.startTime = 0;
    this.elapsedTime = 0;
};
StopWatch.prototype.start = function () {
    StopWatch.call(this);
    this.startTime = now();
    this.updateElapsedTime();
};
StopWatch.prototype.updateElapsedTime = function () {
    StopWatch.call(this);
    this.elapsedTime = now() - this.startTime;
    this.triggerNextTimeUpdate();
};
StopWatch.prototype.triggerNextTimeUpdate = function () {
    StopWatch.call(this);
    this.timer = setTimeout(this.updateElapsedTime.bind(this), 1000);
};
StopWatch.prototype.stop = function () {
    StopWatch.call(this);
    clearTimeout(this.timer);
};

请参阅整个代码的代码段：

/* 
 * JavaScript StopWatch for worklog time measurement
 */
//**************************************************
// Helpers
//**************************************************
var now = function () {
    return Math.round(new Date().getTime() / 1000);
};
//**************************************************
// Stopwatch functionality
//**************************************************
var StopWatch = function () { // PROTOTYPE (class definition & constructor)
    this.startTime = 0;
    this.elapsedTime = 0;
};
StopWatch.prototype.createDivInstance = function () {
    StopWatch.call(this);
    var newDivInstance = document.body.appendChild(document.createElement("div"));
    newDivInstance.className = "jssw";
    newDivInstance.innerHTML = "" +
            "<span class='elapsedTime'>" + this.elapsedTime + "</span><br>" +
            "<span class='buttons'>" +
            "\< <span id='start'>Start</span> | <span id='stop'>Stop</span> \>" +
            "</span>";
    var start = document.getElementById('start');
    var stop = document.getElementById('stop');
    start.addEventListener("click", this.start.bind(this));
    stop.addEventListener("click", this.stop.bind(this));
};
StopWatch.prototype.start = function () {
    StopWatch.call(this);
    this.startTime = now();
    this.updateElapsedTime();
};
StopWatch.prototype.updateElapsedTime = function () {
    StopWatch.call(this);
    this.elapsedTime = now() - this.startTime;
    document.querySelector(".jssw span.elapsedTime").innerHTML = this.elapsedTime;
    this.triggerNextTimeUpdate();
};
StopWatch.prototype.triggerNextTimeUpdate = function () {
    StopWatch.call(this);
    this.timer = setTimeout(this.updateElapsedTime.bind(this), 1000);
};
StopWatch.prototype.stop = function () {
    StopWatch.call(this);
    clearTimeout(this.timer);
};

var swInstance = new StopWatch();
swInstance.createDivInstance();

<html>
    <head>
        <title>How do javascript objects work?</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
<script></script>
    </body>
</html>

Answer 1

您的StopWatch.call(this)来电将在每次调用时重置startTime和elapsedTime，这就是该功能的作用。

删除这些电话，你应该没事。

如何使用原型函数更新实例属性并从另一个函数到达它？

1 个答案: