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