ES6, функция стрелки, контекст «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

Во-вторых, их это взято из окрестностей (лексическое). Поэтому вам больше не требуется bind() или this = 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