Unzufrieden mit den anderen Antworten. Die am häufigsten gewählte Antwort vom 13.3.2019 ist sachlich falsch.
Die kurze, knappe Version von =>bedeutet, dass es sich um eine Verknüpfung handelt, die eine Funktion schreibt UND sie an den aktuellen Wert bindetthis
const foo = a => a * 2;
Ist effektiv eine Abkürzung für
const foo = function(a) { return a * 2; }.bind(this);
Sie können alle Dinge sehen, die gekürzt wurden. Wir brauchten functionweder returnnoch.bind(this) noch Klammern oder Klammern
Ein etwas längeres Beispiel für eine Pfeilfunktion könnte sein
const foo = (width, height) => {
const area = width * height;
return area;
};
Zeigen, dass wir, wenn wir mehrere Argumente für die Funktion wünschen, Klammern benötigen und wenn wir mehr als einen einzelnen Ausdruck schreiben möchten, Klammern und einen expliziten Ausdruck benötigen return.
Es ist wichtig, den .bindTeil zu verstehen und es ist ein großes Thema. Es hat damit zu tun, was thisin JavaScript bedeutet.
ALLE Funktionen haben einen impliziten Parameter namens this. Wie thisbeim Aufrufen einer Funktion festgelegt wird, hängt davon ab, wie diese Funktion aufgerufen wird.
Nehmen
function foo() { console.log(this); }
Wenn Sie es normal nennen
function foo() { console.log(this); }
foo();
this wird das globale Objekt sein.
Wenn Sie sich im strengen Modus befinden
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Es wird sein undefined
Sie können thisdirekt mit calloder einstellenapply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
Sie können auch thisimplizit mit dem Punktoperator festlegen.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
Ein Problem tritt auf, wenn Sie eine Funktion als Rückruf oder Listener verwenden möchten. Sie erstellen eine Klasse und möchten eine Funktion als Rückruf zuweisen, die auf eine Instanz der Klasse zugreift.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
Der obige Code funktioniert nicht, da der thisWert nicht die Instanz der Klasse ist, wenn das Element das Ereignis auslöst und die Funktion aufruft .
Ein üblicher Weg, um dieses Problem zu lösen, ist die Verwendung .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Weil die Pfeilsyntax dasselbe tut, was wir schreiben können
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindmacht effektiv eine neue Funktion . Wenn bindes das nicht gäbe, könnten Sie es sich im Grunde so machen
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
In älterem JavaScript ohne den Spread-Operator wäre dies der Fall
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
Um diesen Code zu verstehen, müssen Sie die Schließungen verstehen. In der Kurzversion wird jedoch bindeine neue Funktion erstellt, die immer die ursprüngliche Funktion mit dem thisdaran gebundenen Wert aufruft . Die Pfeilfunktion macht dasselbe, da sie eine Abkürzung für istbind(this)
