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

実現したいこと

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

前提

javascriptでタイピングゲームの作成に挑戦しており、
その過程でクラスについて学習しています。

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

js

class Panel { //クラス constructor() //コンストラクタ const section = document.createElement('section'); section.classList.add('panel'); this.img = document.createElement('img'); this.img.src = 'img/seven.png'; this.stop = document.createElement('div'); this.stop.textContent = 'STOP'; this.stop.classList.add('stop'); section.appendChild(this.img); section.appendChild(this.stop); const main = document.querySelector('main'); main.appendChild(section); } //インスタンス const panels = [ new Panel(), new Panel(), new Panel(), ];

質問内容

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

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

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

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

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

試してみたこと

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

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

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

コメントを投稿

0 コメント