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

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

本文关键字：函数 另一个 访问 属性 何用 原型 更新 实例      更新时间：2023-09-26

我是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>

您的StopWatch.call(this)调用将重置startTime和elapsedTime每次被调用，这就是函数的作用。

删除这些调用，您应该可以。

相关文章：