イベントハンドラにおけるthis | イベントハンドラーの設定 | JavaScript 超完全入門 基本から発展までのすべて

イベントハンドラとthisの関係

JavaScriptでは、thisキーワードはコンテキスト（文脈）を指します。イベントハンドラ内でthisを使用する場合、それが指す対象がイベントによって異なることがあります。理解を深めるために、thisがどのようにイベントハンドラ内で動作するのかを詳しく見ていきましょう。

イベントハンドラ内でのthisの基本動作

通常、イベントハンドラ内のthisは、イベントがバインドされた要素を指します。例えば、ボタンにクリックイベントを設定した場合、そのthisはクリックされたボタンを指します。

例: clickイベント内のthis

const button = document.querySelector("button");

button.addEventListener("click", function() {
    console.log(this);  // クリックされたボタン要素を指す
});

このコードでは、ボタンをクリックすると、thisはbutton要素を指し、その要素がコンソールに出力されます。

アロー関数とthis

アロー関数を使用した場合、thisの振る舞いが変わります。アロー関数は、通常の関数と異なり、thisを現在のスコープに束縛します。つまり、アロー関数内でのthisは、親のスコープにあるthisを参照します。

例: アロー関数内でのthis

const button = document.querySelector("button");

button.addEventListener("click", () => {
    console.log(this);  // グローバルスコープ（window）を指す
});

この例では、アロー関数が使用されているため、thisはwindowオブジェクトを指します。

イベントハンドラ内のthisの振る舞いの違い

通常の関数とアロー関数内でのthisの動作の違いをまとめると、以下のようになります。

bindメソッドによるthisの制御

JavaScriptでは、bindメソッドを使用することで、関数内のthisを任意のオブジェクトに固定することができます。これは、イベントハンドラ内でthisの動作を制御したい場合に便利です。

例: bindを使用したthisの制御

const button = document.querySelector("button");

function handleClick() {
    console.log(this);  // カスタムオブジェクトを指す
}

const customObject = { name: "Custom Object" };

// thisをcustomObjectに固定してイベントリスナーを追加
button.addEventListener("click", handleClick.bind(customObject));

この例では、bindメソッドを使用して、クリックイベント内のthisをcustomObjectに固定しています。

イベントリスナーでのthisの使い方

thisを適切に使いこなすためには、thisが指す対象を理解し、それに応じたハンドリングが必要です。以下に、通常の関数、アロー関数、bindメソッドを使ったthisの違いをまとめます。

まとめ

イベントハンドラ内のthisは、どのように関数を定義するかによって異なる動作をします。通常の関数では、thisはイベントがバインドされた要素を指し、アロー関数では親のthisを参照します。また、bindメソッドを使うことで、thisを特定のオブジェクトに固定することも可能です。これらの仕組みを理解することで、thisを意図した通りに制御でき、より高度なイベント処理が実現できます。