Wie kann $ (this) nicht das Element sein, das das Ereignis in einem jQuery-Click-Handler ausgelöst hat?

Question

Ich habe einen einfachen Click-Handler

<h1 id="test"> 

$('#test').click(ev => { 
    var $test = $(this); 
    console.log($test.text()); 
}) 

aber es funktioniert nicht, $(this) nicht das Emitterelement ist. Wenn ich this inspizieren sehe ich ein "Fenster" (?) (??) (??!)

auch, wenn ich meinen Code ändern

var $test = $(ev.toElement); 

es perfekt funktioniert.

Wie kann das sein? Was ist in meinem Code, die verhindert, dass jquery das Element in this korrekt übergeben?

Answer 1

Pfeilfunktionen binden nicht this, arguments usw. MDN.

Ein Pfeil Funktionsausdruck hat eine kürzere Syntax im Vergleich zur Funktion Ausdrücke und lexikalisch bindet den this Wert (nicht bindet seine eigenen this, arguments, super oder new.target).

Answer 2

Pfeilfunktionen haben ein "lexikalisches". Das bedeutet, dass der Wert this innerhalb Ihrer Funktion der gleiche wie außerhalb ist. Und da der Wert this im globalen Gültigkeitsbereich window ist, erhalten Sie diesen Wert auch in Ihrem Event-Handler.

Sie haben eine normale Funktion wie diese verwenden, wenn Sie Ihren Code arbeiten wollen:

$('#test').click(function(){ 
var $test = $(this); 
console.log($test.text()); 
}) 

Sie können nicht den Wert von this eines Pfeils Funktion in irgendeiner Weise festgelegt.

var f1 =() => this 
var f2 = function(){return this} 
f1.call("hello") // --> window 
f2.call("hello") // --> "hello" 

this ist immer lexikalisch für Pfeil Funktionen

function foo(){ 
    return() => this 
} 

foo.call(true).call(false) // --> true 

Weitere Informationen über die Pfeil Funktionen einen Blick auf die mdn reference haben.

Answer 3

Yury Tarabanko hat bereits Ihre Frage beantwortet: Pfeilfunktionen binden nicht this. Dies kann nützlich sein, wenn Sie so etwas wie dieses zu schreiben sind:

<!-- HTML --> 

<button>Click me to say hello!</button> 

// JS: 

class Foo{ 
    constructor($button){ 
    this.$button = $button; 

    $button.click(() => { 
     this.sayHello(); 
    }); 
    } 

    sayHello() { 
    alert('Hi'); 
    } 
} 

new Foo($('button')); 

Schauen Sie sich diese Geige: https://jsfiddle.net/bhkkLfty/

Wiedergabe mit diesem Code für eine Weile. Ändern Sie einfach () => {} in function() {} und console.log this.

Edit: Für weitere Informationen besuchen Sie eine der folgenden Artikeln:

• https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
• http://www.2ality.com/2016/02/arrow-functions-vs-bind.html