我不能在 Javascript 中的另一个类函数中调用一个类函数

Question

我想在“startTimer”中调用函数“displayTime”，但由于某种原因，我在控制台中收到“Uncaught TypeError: this.displayTime is not a function”。

let endTimer = "0";
let isRunning = false;

//! CLASS
class Timer {
  constructor(endTimer, isRunning) {
    this.endTimer = endTimer;
    this.isRunning = isRunning;
  }

  startTimer() {
    if (this.endTimer === "0") {
      this.endTimer = new Date().getTime() + 1500000;
    }
    displayTime();
    if (this.isRunning === true) {
      this.pauseTimer();
      this.isRunning
    }
    this.isRunning = true;
  }

  displayTime() {
    let now = new Date().getTime();
    let remainingTime = this.endTimer - now;
    let minutes = Math.floor(remainingTime / 1000 / 60);
    let seconds = Math.floor((remainingTime / 1000) % 60);
    if (seconds < 10) {
      seconds = "0" + seconds;
    }
    timer.innerHTML = `<h1>${minutes}:${seconds}</h1>`;
    start.textContent = "STOP"
    this.update = setInterval(this.displayTime, 100);
  }
}

let newTimer = new Timer(endTimer, isRunning);

//! EVENT LISTENERS

start.addEventListener("click", newTimer.startTimer);

我认为我遗漏了一些明显的东西，但我不明白什么......

Answer 1

start.addEventListener("click", newTimer.startTimer.bind(newTimer));

Answer 2

调用 displayTime();正如上面 cmets 中的 GenericUser 和 Heretic Monkey 所提到的，没有前置关键字“this”是主要问题（下面的第 16 行）。

您可能已经知道这一点，但您也想定义一个 pauseTimer() 方法/函数。

let endTimer = "0";
let isRunning = false;

//! CLASS
class Timer {
constructor(endTimer, isRunning) {
    this.endTimer = endTimer;
    this.isRunning = isRunning;
  }
}

Timer.prototype.startTimer = function() {
    if (this.endTimer === "0") {
        this.endTimer = new Date().getTime() + 1500000;
    }
    this.displayTime(); // this is the important line
    if (this.isRunning === true) {
        this.pauseTimer();
        this.isRunning
    }
    this.isRunning = true;
}

Timer.prototype.displayTime = function() {
    let now = new Date().getTime();
    let remainingTime = this.endTimer - now;
    let minutes = Math.floor(remainingTime / 1000 / 60);
    let seconds = Math.floor((remainingTime / 1000) % 60);
    if (seconds < 10) {
    seconds = "0" + seconds;
    }
    //timer.innerHTML = `<h1>${minutes}:${seconds}</h1>`;
    //start.textContent = "STOP"
    this.update = setInterval(this.displayTime, 100);
}

Timer.prototype.pauseTimer = function() {
    this.isRunning = false;
}

let newTimer = new Timer("0", true);
newTimer.startTimer();

//! EVENT LISTENERS

//start.addEventListener("click", newTimer.startTimer);

Answer 3

class Timer {
    startTimer() {
        // You forgot this keyword
        this.displayTime();
    }
    displayTime() {
        console.log('do something');
    }

}

let newTimer = new Timer();

// addEventListener changes the context of this.
// Using an arrow function will keep 'this' keyword in tact inside startTimer method 
start.addEventListener('click', () => newTimer.startTimer)