ES6、arrow関数、 "this"の文脈

Question

私は矢印関数が単なる類義語関数のショートカットだと思っています。しかし、最近私は、矢印の機能がいくつかの問題を引き起こしたという例を見つけました。

function refreshTable() { 
    $.ajax({ 
    url: root + `/posts?userId=${userId}`, 
    method: 'GET' 
    }).then(function(data) { 

    for (var item of data) { 
     $('table.list tbody').append(` 
      <tr> 
       <td>${item.id}</td> 
       <td>${item.title}</td> 
       <td>${item.date}</td> 
       <td> 
       <a href="" data-id="${item.id}" class="getDetails">View</a> | 
       <a href="" data-id="${item.id}" class="getDetails">Delete</a> 
       </td> 
      </tr> 
      `); 
    } 

    $('.getDetails').click((e) => { 
    // $(this) is actually the ajax call, I can't access the "data" part 
    }); 

    }); 
} 

はしかし、これは動作します：ここでは、サンプルコードです

function refreshTable() { 
    $.ajax({ 
    url: root + `/posts?userId=${userId}`, 
    method: 'GET' 
    }).then(function(data) { 

    for (var item of data) { 
     $('table.list tbody').append(` 
      <tr> 
       <td>${item.id}</td> 
       <td>${item.title}</td> 
       <td>${item.date}</td> 
       <td> 
       <a href="" data-id="${item.id}" class="getDetails">View</a> | 
       <a href="" data-id="${item.id}" class="getDetails">Delete</a> 
       </td> 
      </tr> 
      `); 
    } 

    $('.getDetails').click(function(e) { 
    // $(this) is the HTML element, so I can access "data" 
    }); 

    }); 
} 

はもちろん、機能を矢印にいくつかのロジックがあり、それはthisのための別のスコープを作成します。どうしたの？矢印機能（HTMLにアクセスする）で同じことを達成できますか、この場合は不可能ですか？

ありがとうございます！

Answer 1

まあ、あなたは矢印機能が何をしているか正確に経験しています。レキシカルスコープまたは親スコープからはthisが必要です。 http://exploringjs.com/es6/ch_arrow-functions.html

第2に、これは周囲から（語彙的に）選択されます。したがって、bind（）やthat = thisは必要ありません。

はい、機能させることはできますが、HTML要素をクリック機能の外に置く必要があります。その後、関数内でthisを使用することができ、自分自身の使用に問題はありませんthis。

Answer 2

An arrow function does not create its own this context; rather, it captures the this value of the enclosing context。

説明している特定のケースでは、$(e.target).data('id')を使用してデータを取得できます。

Answer 3

私は矢印の機能と同じことを達成（HTMLにアクセスするため）、またはこの場合は可能ではないということですか？

矢印機能を使用できますが、thisは使用できません。あなたは、ハンドラがイベントオブジェクト経由にバインドされている要素を参照することができます。e.currentTarget

このプロパティは、通常の関数のthisに等しくなります。

---

だから、何が起こっているのですか？

参照：

• Arrow function vs function declaration/expressions: Are they equivalent/exchangeable?
• Arrow Functions and This