jQuery でもアロー関数とthisを使いたい

2019年08月06日(火)

フロントエンド

jQuery でアロー関数を書いた時の this の動きに戸惑ったのでそのことについてまとめておきます。「$(this) だと参照できなかったけど、currentTarget 使ったらできたよ！」という内容になります。

jQuery で書く function() {...} とアロー関数の比較

function() {...} とアロー関数の $(this)、 target、currentTarget を比較してみました。

function() {...} 内の $(this)

例えば、jQueryでよく使うclickイベントを使って下記のようなソースコードを書いた場合、$(this) は「イベントが発生した要素（.click の前）」を指します。今回は ".test1" を $(this) として取得できます。

<p class="test1"><a href="">テスト1</a></p>

$(function(){
  $('.test1').click(function(event) {
    console.log($(this));  // e.fn.init [p.test1]
    console.log($(event.target));  // e.fn.init [a]
    console.log($(event.currentTarget));  // .fn.init [p.test1]
    event.preventDefault();
  });
});

簡易的ですがデモ用リンクを設置しておきました。ブラウザのコンソールを開きながらクリックすると確認できます。

「テスト1」デモ用リンク

アロー関数内の $(this)

続いて、アロー関数を使って書いた場合、$(this) は ".test2" ではなく [document] を指しています。アロー関数の場合は「イベントが発生した要素」をとってくれるわけではないみたいです。なので、function() {...} と同じような動きにしたい時は、$(event.currentTarget)を使ったら ".test2" を取得できます。

<p class="test2"><a href="">テスト2</a></p>

$(function(){
  $('.test2').click((event) => {
    console.log($(this));  // e.fn.init [document]
    console.log($(event.target));  // e.fn.init [a]
    console.log($(event.currentTarget));  // e.fn.init [p.test2]
    event.preventDefault();
  });
});

簡易的なデモ用リンクその2です。ブラウザのコンソールを開きながらクリックすると確認できます。

「テスト2」デモ用リンク

target と currentTarget

target は実際にイベントが発生したところを示します。clickイベントであれば、実際にクリックした場所になります。上記の例だと "a" が該当します。

currentTargetはイベントを仕込んでいるところを示します。

おまけ - thisについて簡単にまとめ -

function() { ... } での this

function での this は、基本的に . の前に書いてあるものを指します。なので関数を呼び出す時の [thisになるところ].関数名(); で this が変わってきます。

※bind 使うと動きが変わったり、new は意味合いが違ったり、function を入れ子すると複雑化したりするみたいですがここでは説明しないです。

アロー関数でのthis

宣言した時にthisがどれか決まるので、関数呼び出し時に this が変わってしまうことはないです。

最後に

本当は this についてまとめようと思ったのですが...、私の力量だと説明するには理解不足だったので、今回の記事は素直にやったことをまとめてみました。なのでかなり jQuery に傾いてます。thisについてまとめられなかった代わりに、thisについて調べた時にわりとわかりやすいと感じたものを下記にピックアップしました。

参考記事

this を知るのに比較的わかりやすそうだと感じた記事