特定の要素を取得するときに私の矢印機能が機能しないのはなぜですか？

Question

私は矢印の機能を使用しようとしていますし、私は私がfontColorのcardColorをログコンソール場合は、変数

let cardColor; 
let fontColor; 

let toggleSidebarInfo =() => { 
    let colors; 
    $('.client-director, .person-link, .card-picture').click((evt) => { 
     employeeId = evt.target.id; 
     ///// FOCUS ON THIS PART ////// 
     colors = $(this).hasClass('card-picture') ? 
      (cardColor = $(this).next().css('backgroundColor'), 
      fontColor = $(this).next().css('color')) : 
      (cardColor = $(this).css('backgroundColor'), 
      fontColor = $(this).css('color')); 
    ///////////////////////// 
     compareId(employeeId); 
    }); 
}; 

を割り当てるしようとしたとき、私は

.click((evt) => { . . . });

をやっていると私は未定義の取得エラーを取得しています

が、私はそれを通常の方法を行う場合

.click(function(evt) { . . . });

すべて正常に動作します。

私には何が欠けていますか？

Answer 1

Arrow functionsは自動的にその中にlexical scopeをバインドしますので、あなたのケースでは、thisはイベントハンドラ内にイベントハンドラの要素を指しません。矢印の機能を使用してevent bindingすぐ下のようになりますarrow functionsの使用

、結合事象の間にここで

$('.client-director, .person-link, .card-picture').click(function(evt){ 

}.bind(this)); 

は、不適切です。最善の選択肢は、通常の無名関数を使うことです。

矢印機能 でバインドされたスコープは、どのような方法でもオーバーライドできません。