Curso JavaScript: 57. this - #jonmircha

Summary

En esta clase de JavaScript, Jonathan Marcha explica el concepto fundamental de la palabra reservada 'this'. Se profundiza en cómo 'this' hace referencia al contexto global en navegadores (el objeto 'window') y en entornos back-end (el objeto 'global'). A lo largo del video, se exploran ejemplos prácticos sobre el uso de funciones, objetos y el impacto de las 'arrow functions' en el comportamiento de 'this'. Se compara cómo las funciones tradicionales y las arrow functions afectan el contexto y el ámbito. Además, se abordan patrones de programación como las closures y el uso de la palabra clave 'that' para preservar el contexto de 'this' en funciones anónimas. Todo esto se explica de manera clara y detallada para asegurar que los conceptos sean entendidos a fondo.

Takeaways

• 😀 El keyword 'this' en JavaScript se refiere al objeto en contexto, y su valor depende de dónde y cómo se utiliza.
• 😀 En el contexto global de los navegadores, 'this' hace referencia al objeto 'window', mientras que en Node.js hace referencia a 'global'.
• 😀 Las funciones regulares definen su propio contexto para 'this', mientras que las arrow functions heredan 'this' del contexto en el que fueron creadas.
• 😀 Las arrow functions no crean su propio scope y, por lo tanto, mantienen el contexto de 'this' del lugar donde fueron declaradas.
• 😀 Cuando se utiliza 'this' dentro de una función en un objeto, hace referencia a ese objeto, no al contexto global.
• 😀 El comportamiento de 'this' puede ser confuso, especialmente cuando se usan funciones anónimas o se pasa una función como argumento.
• 😀 Usar 'this' dentro de una función constructora crea su propio scope, y puede ser necesario usar técnicas como 'that' para mantener la referencia adecuada a 'this'.
• 😀 Cuando se retorna una función dentro de otra función (como en un closure), el contexto de 'this' se refiere al objeto global, a menos que se use una arrow function para heredar el contexto.
• 😀 Las funciones anónimas crean un nuevo contexto de 'this' dentro de su scope, lo cual puede llevar a que 'this' haga referencia al contexto global en lugar del objeto esperado.
• 😀 Para evitar confusión con 'this', se recomienda usar funciones regulares en métodos de objetos, y evitar las arrow functions si se necesita que 'this' haga referencia al objeto.
• 😀 El uso de 'this' en el desarrollo de objetos y métodos debe ser manejado cuidadosamente para evitar errores, y es clave entender cómo los diferentes tipos de funciones afectan su comportamiento.

Q & A

¿Qué representa la palabra clave `this` en JavaScript?

En JavaScript, la palabra clave `this` hace referencia al contexto en el que se está ejecutando el código. En el contexto global de los navegadores, `this` apunta al objeto `window`, mientras que en Node.js hace referencia al objeto `global`.

¿Cómo funciona `this` dentro de una función en JavaScript?

Dentro de una función, `this` hace referencia al contexto de ejecución de esa función. Si la función se ejecuta en el contexto global, `this` apunta al objeto global (como `window` en navegadores), pero si la función está dentro de un objeto, `this` hace referencia a ese objeto.

¿Qué diferencia hay entre una función regular y una arrow function con respecto a `this`?

Las funciones regulares tienen su propio contexto de `this`, es decir, crean un nuevo contexto cuando se invocan. En cambio, las arrow functions no crean su propio contexto de `this`; en su lugar, heredan el valor de `this` del contexto en el que fueron definidas (scope léxico).

¿Por qué las arrow functions pueden causar problemas al usarse dentro de métodos de un objeto?

Las arrow functions heredan el contexto de `this` del lugar donde se definieron, lo que significa que si se utilizan dentro de un objeto, `this` no hará referencia al objeto, sino al contexto global. Esto puede causar que se pierda la referencia al objeto al acceder a sus propiedades o métodos.

¿Qué solución se propone para evitar problemas con el valor de `this` en callbacks o funciones dentro de objetos?

Una solución común es asignar el valor de `this` a una variable externa, como `that` o `self`, antes de usar una función dentro de un objeto o en un callback. De este modo, se preserva el valor original de `this` en el contexto donde se necesita.

¿Qué es una función constructora y cómo utiliza `this`?

Una función constructora en JavaScript es una función que se usa para crear objetos. Dentro de una función constructora, `this` hace referencia al nuevo objeto que se está creando. Al invocar la función con `new`, `this` se asigna al objeto que se crea.

¿Qué pasa si se retorna una función desde una función constructora?

Si se retorna una función desde una función constructora, el valor de `this` dentro de la función retornada hace referencia al contexto global, no al objeto creado. Esto se debe a que las funciones retornadas tienen su propio contexto, distinto al de la función constructora.

¿Cómo pueden las funciones anónimas complicar el uso de `this`?

Las funciones anónimas crean su propio contexto y, por lo tanto, su propio valor de `this`. Esto puede causar confusión si se espera que `this` haga referencia a un objeto específico, pero en cambio, hace referencia al contexto global o a otro objeto, dependiendo de cómo se invoque la función.

¿Cómo se puede solucionar el problema de `this` en funciones anónimas dentro de objetos?

Una solución clásica era asignar el valor de `this` a una variable (por ejemplo, `that`) antes de la ejecución de la función anónima. Esto aseguraba que se mantuviera el contexto correcto de `this`, incluso dentro de la función.

¿Qué ventajas ofrecen las arrow functions en términos de manejo de `this`?

Las arrow functions simplifican la sintaxis y heredan automáticamente el valor de `this` del contexto en el que fueron definidas. Esto puede ser útil para mantener la coherencia del contexto cuando se trabaja con funciones anidadas o callbacks.