これは18日に学習したときに書いた一般的な関数やオブジェクトのthisではありません.
今日は、イベントリスナーとコンストラクション関数でthisを表示します.
[2022.04.18今日の学習]関数、オブジェクトの一般的なthis

this

1.コンストラクション関数のthis

newキーワードを関数のコンストラクション関数として使用する場合、thisは生成されたオブジェクトを示す.

function User(name, age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.log(`이름은 ${this.name}고 나이는 ${this.age}입니다.`);
    console.log(this);
  }
}

const user1 = new User('아이유', 30);
console.log(user1.say());

const user2 = new User('은하', 26);
console.log(user2.say());

コンストラクション関数を定義し,user 1でIUを生成し,user 2で銀河インスタンスを生成し出力する.

各インスタンスの教学キーは、thisが異なることを確認することができる.
IUインスタンスのthisはIU、銀河インスタンスのthisは銀河を指します.
すなわち、コンストラクション関数によって生成されたインスタンスのthisは、自身を示すために生成される.

2.イベントリスナーのthis

アクティビティリースのこの意味は、最も混同されている部分の一つのようです.

const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
  console.log(this); // <button>
});

htmlにボタンを作成し、idがbtnに付与されたときにイベントリスナーを追加します.
クリックするとthisが出力され、結果は<button id="btn">버튼</button>が出力されます.
一般的な関数では、thisはウィンドウを指し、イベントリスナーで使用されるコールバック関数のthisはe.currentTargetと同じ意味を表す.

const btn = document.getElementById('btn');
btn.addEventListener('click', function (e) {
  console.log(this === e.currentTarget); // true
});

ただし、イベントリスナーで作成された関数は、次のようにwindowオブジェクトを指します.

btn.addEventListener('click', function (e) {
  
  btnFc();
  
  function btnFc() {
    console.log('이벤트리스너 안에서 만든 함수 :', this); // window 객체
  }
});

その結果、thisはどの内部で使用するかが最も重要である.
従来の関数ではwindowが使用され、コンストラクション関数でオブジェクトを使用する方法では独自のオブジェクトが使用されます.
イベントリスナーで使用されるthisはe.currentTargetを表す.
(イベントリスナーで個別に作成された関数は、通常の関数に分類されるようです.)
これからもbind、apply、callの方法を一緒に勉強します.
参考資料
MDN this
Zeroch blog-JavaScriptのこれは何ですか?