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

Question

我是 JavaScript 的新手，不太了解原型制作过程。我被这个问题困住了：

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

经过的时间是通过将开始时间存储在实例属性中并从实际时间中减去该值来计算的。

我的问题是start函数设置开始时间后，在update函数被调用的那一刻就消失了（所以update函数根本得不到start值）。在此之后，当停止函数被触发时，停止函数不会获取经过的时间值。

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

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

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，这就是函数的作用。

去掉那些调用，你应该没问题。

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

How to update instance property with prototype function and reach it from another function?

javascript

prototypal-inheritance

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

How to update instance property with prototype function and reach it from another function?

javascript

prototypal-inheritance

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