インスタンス生成のたびに、異なる timeoutId が定義されているのですか?

timeoutId は画像が変わるたびに新しく発行されます。
2021年8月25日
ユーザー
  const panels = [
    new Panel(),
    new Panel(),
    new Panel(),
  ];

今回、上記の記述によりインスタンスが3つ作成され、それらを配列の中に格納していると思うのですが、new Panel()を実行した時点で、Panelクラスのconstructorの中でthis.timeoutId = undefined;が異なるインスタンス内で1つずつ定義されました。

これは、インスタンス生成時に3つの異なるtimeoutIdが定義され(初期値は全てundefined)、spinメソッドのsetTimeout()によって、全てのtimeoutIdが更新されていくという認識で合っていますでしょうか?
また更新する際は、異なるtimeoutIdとして更新されていくのでしょうか?
というのは、異なるtimeoutIdでなければ、仮にいずれかのストップボタン押下時に、どのタイマのIDを解除したいか選べないと思ったからです。

    constructor() {
      const section = document.createElement('section');
      section.classList.add('panel');

      this.img = document.createElement('img');
      this.img.src = this.getRandomImage();

      // 初期化(ここがわからない)
      this.timeoutId = undefined;

      this.stop = document.createElement('div');
      this.stop.textContent = 'STOP';
      this.stop.classList.add('stop');

      this.stop.addEventListener('click', () => {
        clearTimeout(this.timeoutId);
      })

      section.appendChild(this.img);
      section.appendChild(this.stop);

      const main = document.querySelector('main');
      main.appendChild(section);
    }

お手数ですが、ご指導のほどよろしくお願いいたします!

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?