Seguimos la serie de artículos dedicados a ECMAScript 6, en este caso con las funciones arrow, funciones flecha o funciones de flecha gruesa. Esta novedad consiste en una sintaxis abreviada para la expresión de función. Además vinculan el valor this contextualmente.
La cuestión de la sintaxist abreviada es simple si vemos un ejemplo:
var a = [
"Peras",
"Manzanas",
"Naranjas",
"Melones"
];
//Sintaxis de toda la vida
var a2 = a.map(function(t){ return t.length });
//Sintaxis con flecha
var a2 = a.map( s => s.length );
El tema del this contextual es algo más complejo. Seguramente recuerdes que la variable this daba a veces muchos dolores de cabeza ya que pertenecía sólo a un contexto, es decir, cada función definía su propio valor de this. Vamos con un ejemplo de como sería el código old-school:
function Miembro() {
// Este this es una instancia del constructor Miembro()
this.experiencia = 0;
setInterval(function aprender() {
// Y este this de debajo sería
//una instancia de la función aprender(),
//por tanto no podemos usarlo fuera de
//la función de callback
//y nos podría generar errores
this.experiencia++;
}, 5000);
}
Teníais la opción de cachear el this dentro de una variable:
function Miembro() {
var that = this;
that.experiencia = 0;
setInterval(function aprender() {
// Y este this de debajo sería
//una instancia de la función aprender(),
//por tanto no podemos usarlo fuera de
//la función de callback
that.experiencia++;
}, 5000);
}
Otra opción era usar la función bind() para vincular dicha función a this.
Pero con la función de flecha gruesa la cosa es mucho más simple:
function Miembro(){
this.experiencia = 0;
//y aquí va la magiar!!!!
setInterval(() => {
this.aexperiencia++; //no es un this nuevo, sino que
//hace referencia al this de Miembro()
}, 5000);
}
DonnierocK 