Q&A
クリックイベントでは e.target が得られますね。ありがとうございます。
前提
jQueryでアロー関数を使うとできなくなる処理があります。
実現したいこと
できるとき、できないときの理由や法則を知りたいです。
発生している問題
該当のソースコードのような点滅において、後者のようにアロー関数を用いるとできなくなってしまいます。
該当のソースコード
JavaScript
1<!-- 【通常関数の点滅】 --> 2<body> 3 <div class="flash">点滅</div> 4 <script> 5 // できる 6 $('.flash').fadeOut(1000,function(){$(this).fadeIn(1000)}); 7 </script> 8</body>
JavaScript
1<!-- 【アロー関数の点滅】 --> 2<body> 3 <div class="flash">点滅</div> 4 <script> 5 // できない 6 $('.flash').fadeOut(1000,()=>{$(this).fadeIn(1000)}); 7 </script> 8</body>
試したこと
まずクリックイベントでアロー関数を使うとどうなるのかと思い試すと、通常関数でもアロー関数でもできました。
JavaScript
1<!-- 【通常関数のクリック】 --> 2<body> 3 <div class="console">クリックでコンソールに表示</div> 4 <script> 5 // できる 6 $('.console').click(function(){ 7 console.log('コンソールに表示'); 8 }); 9 </script> 10</body>
JavaScript
1<!-- 【アロー関数のクリック】 --> 2<body> 3 <div class="console">クリックでコンソールに表示</div> 4 <script> 5 // できる 6 $('.console').click(()=>{ 7 console.log('コンソールに表示'); 8 }); 9 </script> 10</body>
ではアロー関数の点滅をクリックイベントの中に入れたらどうかと思い試すと、これは不思議で、クリックイベントが通常関数のときは点滅ができて、アロー関数のときはできなくなりました。
JavaScript
1<!-- 【通常関数のクリックで、アロー関数の点滅】 --> 2<body> 3 <div class="flash">クリックで点滅</div> 4 <script> 5 // できる 6 $('.flash').click(function(){ 7 $('.flash').fadeOut(1000,()=>{$(this).fadeIn(1000)}); 8 }); 9 </script> 10</body>
JavaScript
1<!-- 【アロー関数のクリックで、アロー関数の点滅】 --> 2<body> 3 <div class="flash">クリックで点滅</div> 4 <script> 5 // できない 6 $('.flash').click(()=>{ 7 $('.flash').fadeOut(1000,()=>{$(this).fadeIn(1000)}); 8 }); 9 </script> 10</body>
法則性がいまいち掴めないのですが、どのような仕様から以上のような結果になるのでしょうか？
特に知りたいポイントを言語化すると、次のようになります。
点滅の処理はアロー関数ではできないのに、通常関数のクリックイベントの中に入れるとできるようになるのはなぜか？そしてその処理をアロー関数のクリックイベントの中に入れるとやっぱりできないのはなぜか？
よろしくお願い致します。
回答3件
0
ベストアンサー
アロー関数式はどんな時でもthisを拘束しないので、通常の関数式でthisがイベントターゲットなどに拘束されるのと比較すると、thisが利用できるかどうかの違いがあります。
オブジェクトメソッド, "this"
関数とthis · JavaScript Primer #jsprimer
蛇足ですが、ご提示のようなフェードインフェードアウトは、jQuery内部でキューを作って処理してくれるので、メソッドチェーンでつなぐと大体よろしくやってくれると思います。
蛇足の蛇足ですが、fadeIn などのアニメーションでコールバックを使うのはもうあまりやらなくて、.promise()で Deferredオブジェクトとして処理をする、または thenable であることを利用して、ヴァニラの async/await で処理をするのが多いかと思います。
投稿2022/07/05 08:57
編集2022/07/05 09:41
総合スコア36074
0
jQueryはブラウザごとに仕様がまちまちだった古い環境への対応を目指していますので
原則としてアロー関数に置き換えてはいけません。
それでもどうしてもやりたいなら「(e)=>{」でイベントを渡し、thisの代わりに
e.targetを指定してください
javascript
1<script> 2$(()=>{ 3 $('#hoge').on('click',e=>{ 4 console.log($(e.target).text()); 5 }); 6}); 7</script> 8<div id="hoge">1</div>
投稿2022/07/05 09:11
総合スコア114777
0
アロー関数は、thisの処理がfunctionで書いた場合と異なります。
関数の中身としてthisを使わずに書いた場合は、動作は基本的に変わりません。
投稿2022/07/05 08:57
総合スコア145183
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。