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

我可以使用箭头功能（访问HTML）实现相同的功能，还是在这种情况下不可能实现？

您可以使用箭头功能，但不能使用this。您可以通过事件对象引用处理程序绑定的元素：e.currentTarget

此属性通常等于函数的this。

那么，发生了什么？

见：

Answer 2

嗯，您正在体验箭头功能的确切功能。它从词法或父范围获取this。 http://exploringjs.com/es6/ch_arrow-functions.html

其次，他们的这个是从周围环境中获取的（词汇）。因此，您不再需要bind（）或that = this。

是的，您可以使它工作，但您需要将HTML元素放在click函数之外。然后，您可以在函数内使用this，而不会遇到使用自己的this的问题。

Answer 3

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

在您描述的特定情况下，您只需使用$(e.target).data('id')来检索数据。

ES6，箭头功能，“这个”的上下文

3 个答案: