jQueryを調整するES6でハンドラーをクリック

Question

私は過去5年間同じようにjQueryでクリックハンドラーを作成してきました。

$('.some-link').on('click', function(event) { 
    event.preventDefault(); 
    $(this).addClass('active'); 
}); 

私は新しいES6矢印の構文が大好きですが、jQueryの動作を同じにする方法を理解できません。たとえば、以下のように動作しません：

$('.some-link').on('click', (event) => { 
    event.preventDefault(); 
    $(this).addClass('active'); 
}); 

誰もがjQueryイベントハンドラでスイッチを作成しましたか？

Answer 1

矢印機能は、通常の機能と構文上の砂糖だけではありません。一つの違いがあります - 彼らは普通の関数として独自のコンテキストを持っていないので、このように使うことはできません。

jqueryはハンドラ関数をevent.targetとバインドします（つまり、ハンドラ内のthisはevent.targetとなります）。しかし、あなたは矢印の機能を使用する場合、作成されたいかなる関数コンテキストがありません - この詳細については、MDNに、ここで説明されています

$('.some-link').on('click', event => { 
    $(event.target).addClass('active'); 
    return false; // this is same as calling `event.preventDefault();` in jquery 
}); 

： https://developer.mozilla.org/cs/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this

あなたはこのような何かを行うことができます