thisの使用方法と意義について理解を深めたい

Question

実現したいこと

thisを使用する意義と使用方法について理解を深めたいです。

前提

javascriptでスロットマシンの作成に挑戦しており、
その過程でクラスについて学習しています。

お手本のコードは以下です。

'use strict';

{
  class Panel { //クラス
    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);
    }

    getRandomImage() {
      const images = [
        'img/seven.png',
        'img/bell.png',
        'img/cherry.png',
      ];
      return images[Math.floor(Math.random() * images.length)];
    }

    spin() {
      this.img.src = this.getRandomImage();
      this.timeoutId = setTimeout(() => {
        this.spin();
      }, 50);
    }
  }

  const panels = [ //インスタンス
    new Panel(),
    new Panel(),
    new Panel(),
  ];

  const spin = document.getElementById('spin');
  spin.addEventListener('click', () => {
    panels.forEach(panel => {
      panel.spin();
    });
  });
}

質問内容

6行目～14行目にかけてthisが多用されていますが、
これが何を意味するものか理解できません。

クラスから生成されるインスタンスをthisで表示する

検索結果、上記の情報を得られましたが、
thisとインスタンスの関連性が分からず混乱しています。

現状を踏まえ、以下3点についてお伺いしたいです。

1. thisとは一体何者なのか
2. thisはどのタイミングで使用されるのか
3. img stopには付与されるのに、mainやsectionにはなぜ付与されないのか

試してみたこと

thisの定義及び使用例について検索しました。
併せて、クラス コンストラクタ インスタンスについても検索しました。

一通り言葉の意味を理解することはできましたが、
まだ点として理解している感覚です。

各用語がどのように紐づいてクラスを成すのか、
こちらの質問を通じて理解したいです。

Answer 1

コンストラクタしかコードがないから分かりづらいのではないでしょうか。

他のメソッドを使う場合、this.***としておいた値はインスタンスとともに保存されて、あとから同様な形で使うことができます。あとから使わないのであれば、わざわざthisを介してインスタンスに値を入れる必要はありません。

Comments

[rabit.engineer]

ご連絡頂きありがとうございます！

続きのコードを追加致しました。

maisumakun様が仰る通り、
this.*** が複数箇所で使用されていると気づけました。

this.を付与できる要素には条件があるのでしょうか。
例えば、img, stop, timeoutIdには付与されていますが、
sectionやmainには付与されておらず、明確な線引きが分からずにおります...。

[maisumakun]

> 例えば、img, stop, timeoutIdには付与されていますが、
sectionやmainには付与されておらず

すでに回答したように、単に「あとからも使う（あるいは使う可能性のある）もの」を入れてあるだけです。sectionやmainはその場でしか使わないので保存しない、それ以上の深い意味はありません。

[rabit.engineer]

ご回答頂きありがとうございます。
あまり深く考えずにそのように理解させて頂きます。

この度はありがとうございました！