JavaScriptにおけるthisの利点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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