Insoddisfatto delle altre risposte. La risposta più votata al 2019/3/13 è di fatto errata.
La versione abbreviata di ciò che =>significa è che è una scorciatoia per scrivere una funzione E per legarla alla correntethis
const foo = a => a * 2;
È effettivamente una scorciatoia per
const foo = function(a) { return a * 2; }.bind(this);
Puoi vedere tutte le cose che sono state accorciate. Non abbiamo avuto bisogno function, returnné .bind(this)né nemmeno di parentesi graffe o parentesi
Un esempio leggermente più lungo di una funzione freccia potrebbe essere
const foo = (width, height) => {
const area = width * height;
return area;
};
Mostrando che se vogliamo più argomenti per la funzione abbiamo bisogno di parentesi e se vogliamo scrivere più di una singola espressione abbiamo bisogno di parentesi graffe e di un esplicito return .
È importante capire la .bindparte ed è un argomento importante. Ha a che fare con cosathis significa in JavaScript.
TUTTE le funzioni hanno un parametro implicito chiamatothis . Comethis viene impostato quando si chiama una funzione dipende da come viene chiamata quella funzione.
Prendere
function foo() { console.log(this); }
Se lo chiami normalmente
function foo() { console.log(this); }
foo();
this sarà l'oggetto globale.
Se sei in modalità rigorosa
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Sarà undefined
È possibile impostare thisdirettamente utilizzando calloapply
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}
Puoi anche impostare thisimplicitamente usando l'operatore punto.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
Un problema si presenta quando si desidera utilizzare una funzione come callback o listener. Si crea classe e si desidera assegnare una funzione come callback che accede a un'istanza della classe.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
Il codice sopra non funzionerà perché quando l'elemento genera l'evento e chiama la funzione il thisvalore non sarà l'istanza della classe.
Un modo comune per risolvere quel problema è usare .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Perché la sintassi della freccia fa la stessa cosa che possiamo scrivere
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindfa effettivamente una nuova funzione . Se bindnon esistesse, potresti fondamentalmente crearne uno tuo come questo
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
Nel vecchio JavaScript senza l'operatore spread sarebbe
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
Comprendere che il codice richiede una comprensione delle chiusure ma la versione breve è binduna nuova funzione che chiama sempre la funzione originale con il thisvalore che era associato ad essa. la funzione freccia fa la stessa cosa poiché sono una scorciatoia perbind(this)
