jQueryでthisを使用する際の関数の書き方について

Question

jQueryでthisを使うとき、どのようなコードを書けばいいですか？

まず、アロー関数で関数を定義すると、定義された場所で this が束縛されてしまい、結果クリックされたオブジェクトはとれないということが分かりました。

以下のコードだと、その影響でクリックした'p'のカラーを変えることができません。

    $('p').click(()=>{
        $(this).css('color', 'red');
    });

その際の対処法として、自分が知っている手段が二つあるのですが、どちらがいいのか、これ以外に他の方法があるのか、教えていただきたいです。

１．event を引数に event.currentTarget を使うことで、イベントが発生したオブジェクトを取得（この場合だと、そもそもthisを使いませんが、、）

    $('p').click( event =>{
        $(event.currentTarget).css('color', 'red')
    });

２．アロー演算子を使わず、function()で書く

    $('p').click(function(){
        $(this).css('color', 'red')
    });

この二つのどちらがいいのか、これ以外の方法がわかる方いらっしゃいましたら、ご回答お待ちしております。

Answer 1

使わず実現できるならそれでも良いと思いますが、使うならjQueryのfunctionでしょうね。

    $('p').on('click',function(){
        $(this).css('color', 'red');
    });

Comments

[furukawa1687]

ご回答ありがとうございます。
thisを使う以外は、アロー演算子を使って、関数を定義した方がいいのでしょうか？

[hentaiman]

同じくjQueryの中でなら2が良いと思
jQueryは２の書き方だった頃に作られたものだから、２のthisで使うのが一番使いやすいだろうさ

[furukawa1687]

ご回答ありがとうございます。
では、２の書き方で書いていきます。