¿Qué es esto? – Uso de métodos de llamada, aplicación y vinculación en JavaScript

Hola, me llamo Luis y en esta ocasión les traigo un post.

Cuando usamos la palabra clave this en una función en JavaScript, le estamos permitiendo a una función la flexibilidad de ser llamada en varios objetos, cada vez usando una definición diferente de this cuando se invoca.

Esto se debe a que this en una función se determina cómo se llamó a la función y no dónde se definió.

¿Sigo confundido? Vamos a sumergirnos rápidamente en la diferencia entre el enlace implícito y el enlace explícito para aclarar las cosas.

Enlace implícito

El enlace implícito es cuando usamos la notación de puntos para invocar una función, diciéndole a JavaScript que el objeto a la izquierda de la notación de puntos es lo que queremos ser this.

A continuación se muestra un ejemplo simple de cómo se ve el enlace implícito cuando se usa la notación de puntos.

En el ejemplo anterior, hemos definido una función y la hemos asignado a la variable greeting que luego se pasa como una propiedad a los objetos literales de cat y dog.

Al hacer esto, podemos llamar cat.sayHello() y dog.sayHello() y obtener dos respuestas diferentes usando la misma función.

Nuevamente, esto se reduce a cómo invocamos nuestras funciones, lo que determina qué this hay en tiempo de ejecución.

Sin vincularse implícitamente a un objeto, la palabra clave this en nuestra función greeting permanece dentro del ámbito del objeto global, es decir, el Window.

Ahora que hemos visto cómo funciona el enlace implícito, echemos un vistazo a algunas opciones para el enlace explícito this a un objeto.

Usando .call ()

El método .call() está disponible para todos los objetos en JavaScript y le permite enlazar y objetar explícitamente a una función cuando se invoca.

Antes de que veamos .call() en acción, revisemos nuestros ejemplos anteriores y cambiemos un poco el código.

En el siguiente código, ya no llamamos al funcionar greeting como una propiedad de cat por lo que ya no podemos usar la notación de puntos para invocarlo.

Si lo intentáramos, obtendríamos un TypeError notificándonos que cat.greeting no es, de hecho, una función, mientras que una llamada a greeting() volvería undefined para this.name.

Para evitar esto, simplemente querríamos invocar a la función greeting con .call() y pasar nuestro objeto cat como un argumento de contexto, lo que permite a JavaScript saber que this.name, en este momento, significa Sra. Pickles.

El método .call() también puede incluir argumentos adicionales, lo que le permite generar información complementaria.

Sin embargo, recuerde que el primer argumento siempre será el contexto para this, después de eso, todos los demás argumentos se pasan como argumentos regulares a la función.

Si bien .call() nos brinda algunas funciones útiles, escribir cada argumento es ineficiente y requiere mucho tiempo, que es donde .apply() entra en juego.

Aplicar sobre .call ()

Al igual que el método .call(), .apply() toma un argumento de contexto para this como primer argumento, y cualquier argumento posterior se pasa como argumentos regulares a la función que se invoca.

En pocas palabras, en lugar de tener que pasar argumentos uno por uno como hicimos en el ejemplo anterior, podemos pasar una matriz completa y obtener los mismos resultados.

Esto se ve muy bien, pero ¿qué pasa si no podemos o no necesitamos invocar una función inmediatamente? ¿Entonces que…?

Flexibilidad con .bind ()

Si está buscando un método con todo el músculo .call() pero con un poco más de flexibilidad, entonces .bind() es su respuesta.

La función bind() crea una nueva función vinculada , que es un objeto de función exótico (un término de ECMAScript 2015) que envuelve el objeto de función original.

– Documentos web de MDN.

Cuando se llama, el método .bind() crea una nueva función enlazada que se puede llamar en un momento posterior sin perder el contexto de cualquier objeto para el que pasó como argumento this.

Por ejemplo, podemos crear una nueva función, usando newFunction el método .bind() que solo se llama si la longitud activities de la matriz es mayor que dos elementos.

Por suerte para nosotros, tenemos tres elementos enumerados en la activities matriz, pero si eliminamos solo uno, veremos nuestra else declaración impresa en la consola.

Espero que le haya sido de utilidad. Gracias por leer este post.