Las funciones de flecha no vinculan su propio valor ‘este’. En su lugar, se puede acceder al valor ‘this’ del ámbito en el que se definió. Esto hace que las funciones de flecha sean malas candidatas para métodos, ya que no será una referencia al objeto en el que se define el método.
Para los métodos, ES6 proporciona una nueva sintaxis de definición de métodos. Puede ver esto en la definición del método printGuestList a continuación. Esa función es una función estándar, solo con una sintaxis abreviada que permite eliminar los dos puntos y la palabra clave de función.
Debido a que las funciones de flecha no vinculan esto, funcionan bien para todo excepto para los métodos. Como se muestra a continuación, la función de flecha que se pasa a forEach puede acceder a this.name correctamente, ya que se define como una función de flecha y no tiene este enlace propio. Ese código no funcionaría si cambiara la función de flecha por una función estándar.
Cree una carpeta y agregue un archivo, por ejemplo index.js
. Para ejecutar este archivo, debe ejecutar el siguiente comando.
node index.js
Nombre de archivo: index.js
// 'This' in Arrow function const eventOne = { name: 'Birthday Party', guestList: ['Gourav', 'Vijay'], printGuestList() { console.log('Guest list for ' + this.name); this.guestList.forEach((guest) => { console.log(guest + ' is attending ' + this.name) }); } } // 'This' in normal function const eventTwo = { name: 'Birthday Party', guestList: ['Gourav', 'Vijay'], printGuestList() { console.log('Guest list for ' + this.name); this.guestList.forEach(function (guest) { console.log(guest + ' is attending ' + this.name) }); } } eventOne.printGuestList(); console.log('---------------------'); eventTwo.printGuestList();
Pasos para ejecutar el programa:
- Ejecute el archivo index.js con el siguiente comando:
node index.js
Así es como funciona ‘este’ enlace en funciones de flecha y funciones normales.
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA