Insatisfait des autres réponses. La réponse la plus votée en date du 2019/3/13 est en fait fausse.
La version abrégée de ce qui =>signifie est un raccourci pour écrire une fonction ET pour la lier au courantthis
const foo = a => a * 2;
Est effectivement un raccourci pour
const foo = function(a) { return a * 2; }.bind(this);
Vous pouvez voir toutes les choses qui se sont raccourcies. Nous n'avions pas besoin function, ni returnni .bind(this)ni ni même d'accolades ou de parenthèses
Un exemple légèrement plus long de fonction de flèche peut être
const foo = (width, height) => {
const area = width * height;
return area;
};
Montrer que si nous voulons plusieurs arguments pour la fonction, nous avons besoin de parenthèses et si nous voulons écrire plus d'une seule expression, nous avons besoin d'accolades et d'un explicite return.
Il est important de comprendre la .bindpartie et c'est un gros sujet. Cela a à voir avec ce que thissignifie en JavaScript.
TOUTES les fonctions ont un paramètre implicite appelé this. La façon dont thisest définie lors de l'appel d'une fonction dépend de la façon dont cette fonction est appelée.
Prendre
function foo() { console.log(this); }
Si vous l'appelez normalement
function foo() { console.log(this); }
foo();
this sera l'objet global.
Si vous êtes en mode strict
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Ce sera undefined
Vous pouvez définir thisdirectement en utilisant callouapply
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}
Vous pouvez également définir thisimplicitement à l'aide de l'opérateur point.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
Un problème survient lorsque vous souhaitez utiliser une fonction comme rappel ou écouteur. Vous créez une classe et souhaitez affecter une fonction comme rappel qui accède à une instance de la classe.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
Le code ci-dessus ne fonctionnera pas car lorsque l'élément déclenche l'événement et appelle la fonction, la thisvaleur ne sera pas l'instance de la classe.
Une façon courante de résoudre ce problème consiste à utiliser .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Parce que la syntaxe des flèches fait la même chose que nous pouvons écrire
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindfait effectivement une nouvelle fonction . Si cela bindn'existait pas, vous pourriez en fait créer le vôtre comme ceci
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
Dans les anciens JavaScript sans l'opérateur de propagation, il serait
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
La compréhension de ce code nécessite une compréhension des fermetures mais la version courte est bindune nouvelle fonction qui appelle toujours la fonction d'origine avec la thisvaleur qui lui était liée. fonction de flèche fait la même chose car ils sont un raccourci pourbind(this)
