Insatisfecho con las otras respuestas. La respuesta más votada a partir del 3/3/13 es objetivamente errónea.
La versión abreviada de lo que =>significa es que es un acceso directo que escribe una función Y para vincularla a la actualthis
const foo = a => a * 2;
Es efectivamente un atajo para
const foo = function(a) { return a * 2; }.bind(this);
Puedes ver todas las cosas que se acortaron. No necesitábamos function, ni returntampoco .bind(this)ni siquiera llaves o paréntesis
Un ejemplo un poco más largo de una función de flecha podría ser
const foo = (width, height) => {
const area = width * height;
return area;
};
Demostrando que si queremos múltiples argumentos para la función necesitamos paréntesis y si queremos escribir más de una sola expresión, necesitamos llaves y un código explícito return .
Es importante entender la .bindparte y es un gran tema. Tiene que ver con lo quethis significa en JavaScript.
TODAS las funciones tienen un parámetro implícito llamado this. Cómothis se establece cuando se llama a una función depende de cómo se llama esa función.
Tomar
function foo() { console.log(this); }
Si lo llamas normalmente
function foo() { console.log(this); }
foo();
this Será el objeto global.
Si estás en modo estricto
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Será undefined
Puede configurar thisdirectamente usando 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}
También puede establecer thisimplícitamente utilizando el operador de 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 surge cuando desea utilizar una función como una devolución de llamada o un oyente. Hace la clase y desea asignar una función como la devolución de llamada que accede a una instancia de la clase.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
El código anterior no funcionará porque cuando el elemento activa el evento y llama a la función, el thisvalor no será la instancia de la clase.
Una forma común de resolver ese problema es usar .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Debido a que la sintaxis de la flecha hace lo mismo que podemos escribir
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindEfectivamente hace una nueva función . Si bindno existiera, básicamente podría hacer el suyo así
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
En JavaScript anterior sin el operador de propagación sería
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
Comprender que el código requiere una comprensión de los cierres, pero la versión corta es binduna nueva función que siempre llama a la función original con el thisvalor que estaba vinculado a ella. la función de flecha hace lo mismo ya que son un atajo parabind(this)
