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