JavaScriptにおけるthisオブジェクト

ここでは、イベントハンドラ関数内で利用可能な特別なオブジェクト thisについて学びます。このオブジェクトは、イベントが発生した要素を指し示します。

thisオブジェクトは、イベントが発生した要素と、その結果として何らかのアクションが行われる要素が同じである場合に便利です。

例えば、input要素がある場合、そこにフォーカス喪失(blur)イベントのハンドラをバインドし、そのイベント発生時にinputのテキストに対して何かを行うことができます。説明したことを実装してみましょう。以下のinput要素があるとします:

html<input id="elem" value="text">

この要素への参照を変数 elemに取得しましょう:

javascriptlet elem = document.querySelector('#elem');

この要素に blurイベントのハンドラ関数をバインドします:

javascriptelem.addEventListener('blur', func);

この関数 funcの内部では、input要素を指す thisオブジェクトが利用可能です:

javascriptfunction func() {
  console.log(this); // 当該要素への参照を含みます
}

input要素の value属性の内容を出力してみましょう:

javascriptfunction func() {
  console.log(this.value); // 属性の内容を出力します
}

では、inputに何らかのテキストを書き込んでみましょう:

javascriptfunction func() {
  this.value = '!!!';
}

無名関数も使用できます:

javascriptelem.addEventListener('blur', function() {
  this.value = '!!!';
});