thisは中身の変化する変数。

const test = document.getElementById("test");

function kansu() { //普通の関数
	console.log(this);
}

const kansu2 = () => { //アロー関数
	console.log(this);
}

test.addEventListener("click", function() {
	console.log(this); // =>testのHTML要素
	kansu(); // =>window
	kansu2(); // =>window
});

1個目はイベントリスナーの中で呼び出しており、イベントターゲットであるtestがthisになる
関数の中で呼び出したthisはグローバルオブジェクト（webブラウザの場合はwindow）になる

`const test2 = document.getElementById("test2");
const test3 = document.getElementById("test3");
const test4 = document.getElementById("test4");

// testContentに毎秒1ずつ足していく処理
// 下の3つはいずれも関数の中でbindでthisがイベントターゲットに固定されている
function countUp() {
	this.textContent++;
};

test2.addEventListener("click", function() { //外で定義した関数を中で呼んでbindをつける
	this.textContent = 1;
	setInterval(countUp.bind(this), 1000);
})

test3.addEventListener("click", function() { //中で関数をつくって最後にbindをつける
	this.textContent = 1;
	setInterval(function() {
		this.textContent++;
	}.bind(this), 1000);
})

test4.addEventListener("click", function() { //アロー関数にするとbindを省略できる
	this.textContent = 1;
	setInterval(() => {
		this.textContent++;
	}, 1000);
})

参考
https://foreignkey.toyao.net/archives/763
https://techplay.jp/column/593
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener