Aprenda ES6 The Dope Way Parte II: Funciones de flecha y la palabra clave 'esto'

Programación

¡Bienvenido a la Parte II de Learn ES6 The Dope Way, una serie creada para ayudarlo a comprender fácilmente ES6 (ECMAScript 6)!

Entonces, ¿qué diablos es => ; ?

Probablemente haya visto estos extraños símbolos de jeroglíficos de aspecto egipcio aquí y allá, especialmente en el código de otra persona, donde actualmente está depurando un problema de palabra clave ' esto' . Después de una hora de retoques, ahora está deambulando por la barra de búsqueda de Google y acechando Stack Overflow. ¿Suena familiar?

Juntos, cubramos tres temas en Learn ES6 The Dope Way Parte II:

  • Cómo se relaciona la palabra clave ' esto ' con => .
  • Cómo migrar funciones de ES5 a ES6.
  • Caprichos importantes a tener en cuenta al usar => .

Funciones de flecha

Las funciones de flecha se crearon para simplificar el alcance de la función y hacer que el uso de la palabra clave ' this ' sea mucho más sencillo. Utilizan la etiqueta = & gt; sintaxis, que parece una flecha. Aunque no creo que sea necesario ponerse a dieta, la gente lo llama “la flor de la grasa ” (y los entusiastas de Ruby pueden conocerlo mejor como el “hash rock et”), algo que hay que tener en cuenta.

Cómo se relaciona la palabra clave "esto" con las funciones de flecha

Antes de profundizar en las funciones de flecha de ES6, es importante tener una idea clara de a qué se une ' esto ' en el código ES5.

Si la palabra clave ' this ' estuviera dentro del método de un objeto (una función que pertenece a un objeto), ¿a qué se referiría?

// Test it here: //jsfiddle.net/maasha/x7wz1686/ var bunny = { name: 'Usagi', showName: function() { alert(this.name); } }; bunny.showName(); // Usagi

¡Correcto! Se referiría al objeto. Veremos por qué más adelante.

Ahora, ¿qué pasa si la palabra clave ' this ' estuviera dentro de la función del método?

// Test it here: //jsfiddle.net/maasha/z65c1znn/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { this.tasks.forEach(function(task) { alert(this.name + " wants to " + task); }); } }; bunny.showTasks(); // [object Window] wants to transform // [object Window] wants to eat cake // [object Window] wants to blow kisses // please note, in jsfiddle the [object Window] is named 'result' within inner functions of methods.

¿Qué obtuviste? Espera, ¿qué pasó con nuestro conejito…?

Ah, ¿pensaste que ' esto ' se refiere a la función interna del método?

¿Quizás el objeto en sí?

Es prudente pensar eso, pero no es así. Permítame enseñarle lo que los ancianos de la codificación me habían enseñado una vez:

Codificación Elder : “ Ah, sí, t que el código es fuerte con éste. De hecho, es práctico pensar que la palabra clave 'this' se une a la función, pero la verdad es que 'this' ahora está fuera de alcance ... Ahora pertenece a ... ", hace una pausa como si experimentara una confusión interna ," el objeto ventana . "

Así es. Así es exactamente como sucedió.

¿Por qué ' esto ' se une al objeto de ventana? Debido a que ' esto ' siempre hace referencia al propietario de la función en la que se encuentra, en este caso, ya que ahora está fuera de alcance, la ventana / objeto global.

Cuando está dentro del método de un objeto, el propietario de la función es el objeto. Por tanto, la palabra clave ' this ' está vinculada al objeto. Sin embargo, cuando está dentro de una función, ya sea independiente o dentro de otro método, siempre se referirá a la ventana / objeto global.

// Test it here: //jsfiddle.net/maasha/g278gjtn/ var standAloneFunc = function(){ alert(this); } standAloneFunc(); // [object Window]

Pero por qué…?

Esto se conoce como una peculiaridad de JavaScript, lo que significa algo que simplemente sucede dentro de JavaScript que no es exactamente sencillo y no funciona de la manera que usted pensaría. Esto también fue considerado por los desarrolladores como una mala elección de diseño, que ahora están solucionando con las funciones de flecha de ES6.

Antes de continuar, es importante estar al tanto de dos formas inteligentes en que los programadores resuelven el problema ' esto ' dentro del código ES5, especialmente porque continuará ejecutándose en ES5 por un tiempo (no todos los navegadores han migrado completamente a ES6 todavía):

# 1 Cree una variable fuera de la función interna del método. Ahora, el método 'forEach' obtiene acceso a ' this ' y, por lo tanto, a las propiedades del objeto y sus valores. Esto se debe a que ' this ' se almacena en una variable mientras todavía está dentro del alcance del método directo del objeto 'showTasks'.

// Test it here: //jsfiddle.net/maasha/3mu5r6vg/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { var _this = this; this.tasks.forEach(function(task) { alert(_this.name + " wants to " + task); }); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

# 2 Use bind para adjuntar la palabra clave ' this ' que se refiere al método a la función interna del método.

// Test it here: //jsfiddle.net/maasha/u8ybgwd5/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { this.tasks.forEach(function(task) { alert(this.name + " wants to " + task); }.bind(this)); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

Y ahora presentamos… ¡Funciones de flecha! ¡Tratar con ' este ' problema nunca ha sido más fácil y sencillo! La solución simple de ES6:

// Test it here: //jsfiddle.net/maasha/che8m4c1/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks() { this.tasks.forEach((task) => { alert(this.name + " wants to " + task); }); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

Mientras que en ES5 ' esto ' se refería al padre de la función, en ES6, las funciones de flecha usan un alcance léxico - ' esto ' se refiere a su alcance circundante actual y no más. Por lo tanto, la función interna sabía vincularse únicamente a la función interna, y no al método del objeto o al objeto mismo.

Cómo migrar funciones de ES5 a ES6.

// Before let bunny = function(name) { console.log("Usagi"); } // After let bunny = (name) => console.log("Usagi") // Step 1: Remove the word ‘function’. let bunny = (name) { console.log("Usagi"); } // Step 2: If your code is less than a line, remove brackets and place on one line. let bunny = (name) console.log("Usagi"); // Step 3. Add the hash rocket. let bunny = (name) => console.log("Usagi");

¡Lo hiciste! ¡Gran trabajo! Bastante simple, ¿verdad? Aquí hay algunos ejemplos más que utilizan la flecha más gruesa y delgada para acostumbrar sus ojos:

// #1 ES6: if passing one argument you don't need to include parenthesis around parameter. var kitty = name => name; // same as ES5: var kitty = function(name) { return name; }; // #2 ES6: no parameters example. var add = () => 3 + 2; // same as ES5: var add = function() { return 3 + 2; }; // #3 ES6: if function consists of more than one line or is an object, include braces. var objLiteral = age => ({ name: "Usagi", age: age }); // same as ES5: var objLiteral = function(age) { return { name: "Usagi", age: age }; }; // #4 ES6: promises and callbacks. asyncfn1().then(() => asyncfn2()).then(() => asyncfn3()).then(() => done()); // same as ES5: asyncfn1().then(function() { asyncfn2(); }).then(function() { asyncfn3(); }).done(function() { done(); });

Peculiaridades importantes a tener en cuenta al usar las funciones de flecha

Si usa la palabra clave 'nueva' con => funciones, arrojará un error. Las funciones de flecha no se pueden usar como un constructor - las funciones normales apoyan el 'nuevo' a través del prototipo de propiedad y el método interno [[Construct]]. Las funciones de flecha no usan ninguna, por lo que el nuevo (() => {}) arroja un error.

Otras peculiaridades a considerar:

// Line breaks are not allowed and will throw a syntax error let func1 = (x, y) => { return x + y; }; // SyntaxError // But line breaks inside of a parameter definition is ok let func6 = ( x, y ) => { return x + y; }; // Works! // If an expression is the body of an arrow function, you don’t need braces: asyncFunc.then(x => console.log(x)); // However, statements have to be put in braces: asyncFunc.catch(x => { throw x }); // Arrow functions are always anonymous which means you can’t just declare them as in ES5: function squirrelLife() { // play with squirrels, burrow for food, etc. } // Must be inside of a variable or object property to work properly: let squirrelLife = () => { // play with squirrels, burrow for food, etc. // another super squirrel action. }

¡Felicidades! ¡Has superado Learn ES6 The Dope Way Part II y ahora tienes una base para el conocimiento de la función de flecha, los beneficios léxicos que le da a ' this ' y también has adquirido algunas habilidades de JavaScript! :)

Mantén tu sabiduría actualizada dando me gusta y siguiendo a medida que más. ¡ Aprende ES6 The Dope Way pronto a Medium!

Parte I: const, let & var

Parte II: (Flecha) => funciones y 'esta' palabra clave

Part III: Template Literals, Spread Operators & Generators!

Part IV: Default Parameters, Destructuring Assignment, and a new ES6 method!

Part V: Classes, Transpiling ES6 Code & More Resources!

You can also find me on github ❤ //github.com/Mashadim