JavaScriptにおけるthisの利点

これまでの説明では、thisの特別な利点は明らかではありませんでした。ハンドラー関数の内部では、変数elemが関数funcに対してグローバルですので、要素自体にアクセスできます：

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// ここでは要素を持つ変数elemにアクセスできます
}

そして、thisの内容と変数elemの内容がこの場合等しいことは、簡単に理解できます：

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // trueを出力します
}

では、thisの特別な利点は何でしょうか？それは、複数の要素があり、それぞれに同じ関数がバインドされている場合に現れます。

例を見てみましょう。3つのボタンがあるとします：

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

変数にそれらへの参照を取得します：

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

これらのボタンに同じ関数をバインドします：

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

そして、関数内でthis.valueを出力します：

function func() {
	console.log(this.value);
}

結果として、3つのボタンがあります。各ボタンをクリックすると、関数funcが呼び出されます。このとき、クリックのたびにthisは、イベントが発生したボタンへの参照を含みます。

つまり、各クリックは、クリックが発生したボタンのvalueをコンソールに出力しますが、それを実行するのは同じ関数funcなのです！これがthisを使用する利点です。

何らかのテキストが書かれた5つの段落があります。どの段落をクリックしても、そのテキストの末尾に感嘆符を追加してください。

何らかの数値が入力された3つの入力欄があります。どの入力欄でフォーカスが失われても、その中の数値を2乗してください。