Funciones flecha de JavaScript

Recomendaciones de curso:

Se introdujeron las funciones flecha en ES6.

Las funciones flecha nos permiten escribir funciones más cortas:

Sintaxis

Pruebe usted mismo

let myFunction = (a, b) => a * b;

hello = function() {
  Después de usar la función flecha:
}

Pruebe usted mismo

Antes:

hello = () => {
  Después de usar la función flecha:
}

Pruebe usted mismo

return "Hello World!"; ¡Realmente se ha acortado! Si la función tiene una sola instrucción y esta instrucción devuelve un valor, se pueden omitir los paréntesis y return

Palabra clave:

Valor de retorno predeterminado de la función flecha:

Pruebe usted mismo

hello = () => "Hello World!";Nota:

Esto solo es válido cuando la función tiene una sola instrucción.

Si tiene parámetros, páselos dentro de los paréntesis:

Función flecha con parámetros:

Pruebe usted mismo

hello = (val) => "Hello " + val;

De hecho, si solo hay un parámetro, también puede omitir los paréntesis:

Función flecha sin paréntesis:

Pruebe usted mismo

esto hello = val => "Hello " + val;

¿Qué hacer si? esto El tratamiento de los parámetros también es diferente.

En resumen, usar funciones flecha no tiene el mismo tratamiento. esto está enlazada.

En las funciones comunes, la palabra clave esto representa el objeto que llama a la función, que puede ser la ventana, el documento, el botón u otra cosa.

Para las funciones flecha,esto La palabra clave siempre representa el objeto que define la función flecha.

Veamos dos ejemplos para entender la diferencia.

Ambos ejemplos llaman al método dos veces, primero al cargar la página y segundo al hacer clic en el botón del usuario.

El primer ejemplo utiliza una función común, y el segundo ejemplo utiliza una función flecha.

El resultado muestra que el primer ejemplo devuelve dos objetos diferentes (ventana y botón), y el segundo ejemplo devuelve dos veces el objeto ventana, porque el objeto ventana es el "propietario" de la función.

ejemplo

Para las funciones comunes, this representa el objeto que llama a la función:

// Función común:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Llamada a la función por parte del objeto window:
window.addEventListener("load", hello);
// Llamada a la función por parte del objeto button:
document.getElementById("btn").addEventListener("click", hello);

Pruebe usted mismo

ejemplo

usando funciones flecha, entonces esto Representa al propietario de la función:

// Función flecha:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Llamada a la función por parte del objeto window:
window.addEventListener("load", hello);
// Llamada a la función por parte del objeto button:
document.getElementById("btn").addEventListener("click", hello);

Pruebe usted mismo

Recuerde estas diferencias al usar funciones. A veces, el comportamiento de una función normal es exactamente lo que necesita, y si no es así, utilice funciones flecha.

Compatibilidad del navegador

La siguiente tabla indica la versión del navegador que es la primera en soportar completamente las funciones flecha de JavaScript:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Septiembre de 2015 Julio de 2015 Mayo de 2013 Septiembre de 2016 Septiembre de 2015