ES6, Pfeilfunktion, Kontext "dieser"

Question

Ich dachte, dass die Pfeilfunktion "nur" eine Abkürzung für anonyme Funktionen ist, also habe ich sie ziemlich oft benutzt. Vor kurzem stieß ich jedoch auf ein Beispiel, dass die Pfeilfunktion einige Probleme verursachte. Hier ist ein Beispielcode:

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 
    }); 

    }); 
} 

Dies funktioniert jedoch:

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" 
    }); 

    }); 
} 

Offensichtlich gibt es einige logische Funktionen Pfeil, erstellt es einen anderen Rahmen für this. So was ist los? Kann ich dasselbe mit einer Pfeilfunktion erreichen (um auf HTML zuzugreifen) oder ist das in diesem Fall nicht möglich?

Danke!

Answer 1

Nun, Sie erfahren genau, was eine Pfeilfunktion tut. Es nimmt die this aus dem lexikalischen oder übergeordneten Bereich. http://exploringjs.com/es6/ch_arrow-functions.html

Zweitens ist dies von der Umgebung abgeholt (lexikalisch). Daher brauchst du bind() oder das = das nicht mehr.

Ja, Sie können es funktionieren lassen, aber Sie müssen das HTML-Element außerhalb der Klick-Funktion platzieren. Dann können Sie this innerhalb der Funktion verwenden und nicht das Problem haben, sein eigenes this zu verwenden.

Answer 2

An arrow function does not create its own this context; rather, it captures the this value of the enclosing context. Im spezifischen Fall, den Sie beschreiben, können Sie einfach $(e.target).data('id') verwenden, um die Daten abzurufen.

Answer 3

Konnte ich das Gleiche mit einer Pfeilfunktion erreichen (um auf HTML zuzugreifen) oder ist das in diesem Fall nicht möglich?

Sie können eine Pfeilfunktion verwenden, aber Sie können this nicht verwenden. Sie können auf das Element beziehen sich die Handler über das Ereignis Objekt gebunden ist: e.currentTarget

Diese Eigenschaft wird in der Regel auf die this der Funktion gleich sein.

---

Also, was ist los?

See:

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