Introducción

¿Estás listo para adentrarte en el divertido mundo de JavaScript y aprender sobre el poder secreto de la palabra clave "esto"? Prepárese para un viaje increíble a través del interesante reino de "esto", donde descubrirá las causas de sus acciones y se dará cuenta de todo el poder de su código. Con ejemplos atractivos y explicaciones nítidas, esta guía lo llevará en un viaje emocionante a través de los diversos vínculos de "esto". Estará equipado para manejar cualquier dificultad de codificación que se le presente cuando termine este viaje, y tendrá la seguridad en sí mismo para construir sistemas robustos y escalables. ¡Así que sin más preámbulos, abróchese las botas de código y viajemos a través de los territorios desconocidos de la palabra clave "esto"!

La palabra clave "esto" en JavaScript se refiere al objeto del que la función actual es un método. Es una variable de alcance dinámico, lo que significa que su alcance cambia según el contexto de la llamada de la función durante el tiempo de ejecución. “esto” es un concepto clave y frecuentemente malinterpretado en JavaScript, ya que el significado puede variar sustancialmente según el contexto en el que se utilice.

Enlaces de "esto"

La palabra clave "esto" tiene cuatro enlaces principales en JavaScript: enlace predeterminado, enlace implícito, enlace explícito y enlace nuevo. Comprender estos enlaces es esencial para utilizar la palabra clave "esto" en JavaScript de manera efectiva, ya que cada uno especifica cómo se debe usar "esto" en un contexto específico.

1. Enlace predeterminado

Cuando el término "esto" se usa fuera de una función o en el ámbito global de JavaScript, está vinculado de forma predeterminada. En este caso, "esto" se refiere al objeto global, que es "ventana" en un navegador o "global" en Node.js.

Aquí hay un ejemplo del enlace predeterminado en acción:

Como se ve en la primera declaración de console.log, la palabra clave "this" en el ejemplo anterior se refiere al objeto global cuando se usa fuera de cualquier función. La segunda oración de console.log demuestra que cuando se usa dentro de la función logThis, también se refiere al objeto global.

Es vital recordar que en modo estricto, el objeto global no está definido y no el valor de "esto" en el ámbito global. Puede habilitar el modo estricto agregando "usar estricto" al comienzo de su código o dentro de una función como se muestra a continuación.

2. Enlace implícito

La palabra clave "this" en este enlace se refiere al objeto del que la función es una propiedad. "esto" especifica el objeto cuando se usa una función como método de un objeto. El objeto del cual la función es una propiedad determina el valor de “esto”.

Tomemos por ejemplo,

La función " saludar " es un atributo del objeto " persona " en el ejemplo anterior. Podemos acceder a la propiedad del nombre del objeto " persona " llamando a person.greet(), que establece el valor de this dentro del método de saludo para el objeto persona. El enlace implícito se puede ver en esta situación. El enlace implícito se ilustra con esto.

Veamos otro ejemplo:

En este ejemplo, el objeto " instructor " tiene la función " decirNombre " establecida como una propiedad, y cuando se llama a instructor.decir() , el objeto " instructor " se establece como el valor de " esto " en la función " decirNombre ". . Este es otro ejemplo de enlace implícito.

3. Enlace explícito

No importa cómo o dónde se llame a una función en el código, puede establecer explícitamente el valor de " esto " para una llamada mediante un método de enlace explícito.

Existen tres métodos de enlace explícito en JavaScript: " llamar ", " aplicar " y " enlazar ".

Puede llamar a una función usando el método de " llamada ", y también puede establecer el valor de " esto " para esa llamada de función. El valor que desea establecer para " esto " es el primer argumento del método de llamada, y los otros argumentos se envían a la función individualmente.

Toma por ejemplo:

El método " call " se usa en el ejemplo anterior para invocar la función " sayName " y el valor de " this " se establece en el objeto instructor.

Similar a " llamar " es el método " aplicar" , excepto que acepta una serie de argumentos en lugar de argumentos individuales.

Veamos un ejemplo:

En el ejemplo anterior, se usó el método " aplicarsayName " para invocar la función y establecer el valor de " esto " en el objeto " instructor ". Los argumentos de la función se pasan como una matriz.

El método " bind " crea una nueva función usando el primer argumento pasado a "bind" como el valor de "this". El argumento dado a "bind" se establece como el valor de "this" dentro de la función original cuando se llama más tarde a la nueva función.

Aquí hay un ejemplo a continuación:

En el ejemplo anterior, el método " bind " se usó para crear una nueva función " instructorSayName " usando " this " establecido en el objeto " instructor ". Cuando más tarde se llamó a la función “ instructorSayName ”, el valor de “ this ” dentro de la función “ sayName ” se estableció en el objeto “ instructor ”, como si hubiéramos usado “ call ” o “ apply ”.

4. Nueva encuadernación

El proceso por el cual la palabra clave " este " se vincula a un objeto recién construido cuando se llama a una función con el operador " nuevo " se denomina vinculación " nueva ".

Cuando se llama a una función con el operador " nuevo ", se crea un nuevo objeto y la palabra clave " este " dentro de la función se establece en este objeto recién creado. Además, el prototipo del objeto recién creado se establece en la propiedad prototipo de la función.

Toma por ejemplo:

En el ejemplo anterior, se crea un nuevo objeto utilizando el operador " nuevo " para llamar a la función " Persona ". Las propiedades " nombre " y " saludo " se agregan al objeto, y la palabra clave " este" dentro de la función " Persona " se establece en el objeto recién generado.

Es crucial tener en cuenta que el objeto recién creado se devuelve sin necesidad de una declaración de "retorno" cuando se llama a una función usando el operador "nuevo". Si se usa una declaración de "retorno" y devuelve un objeto, ese objeto se devolverá en lugar del objeto recién creado. Si se usa una declaración de "retorno" y devuelve un valor que no es un objeto, el objeto recién creado se devolverá de todos modos.

Función de flecha y "esto"

Las funciones de flecha de JavaScript proporcionan un atajo para escribir funciones anónimas (funciones sin nombre). La forma en que vinculan la palabra clave "esto" las distingue de las expresiones de funciones convencionales.

El valor de "esto" en las expresiones de funciones convencionales depende de cómo se invoque la función. Como se explicó anteriormente, se puede establecer explícitamente mediante los comandos "llamar", "aplicar" o "vincular", o establecerse implícitamente según el objeto que contenga la función.

Sin embargo, en las funciones de flecha, el contexto en el que se generó la función de flecha, no cómo se invoca, determina el valor de "esto". Esto significa que si una función de flecha no está dentro de otra función, la palabra clave "este" dentro de la función de flecha siempre se referirá al valor "este" de la función exterior o del objeto global.

En pocas palabras, las funciones de flecha no tienen su propio valor "este"; en su lugar, heredan el valor "este" del ámbito adjunto.

Por ejemplo:

Aquí hay otro ejemplo de una función de flecha que se refiere a la palabra clave "esto" de la función externa:

En el ejemplo anterior, la función " saludar " en este ejemplo se definió como una función de flecha dentro de la función " Persona ". El valor " este " en la función de flecha correspondía al valor " este " de la función "Persona", que se asignó al objeto recién generado " elie ", cuando se invocó la función " saludar ".

Vale la pena mencionar que el uso de "llamar", "aplicar" o "vincular" no puede alterar el enlace "esto" en las funciones de flecha. Independientemente del método utilizado para invocar la función, el valor "este" dentro de una función de flecha sigue siendo el mismo. Esto hace que las funciones de flecha sean especialmente beneficiosas para las devoluciones de llamada y los controladores de eventos, donde el valor de "esto" cambia con frecuencia de forma inesperada.

Conclusión

En conclusión, aprender la palabra clave "esto" de JavaScript es un paso crucial para convertirse en un verdadero experto en JavaScript. Este concepto esencial pero frecuentemente desconcertante puede hacer o deshacer su código y es la clave para utilizar la capacidad total del lenguaje. Podrá escribir código que no solo sea más eficiente sino también más elegante y dinámico si tiene una comprensión profunda del enlace predeterminado, el enlace implícito, el enlace explícito y el enlace nuevo, que son los cuatro enlaces básicos de "esto". . La capacidad de desarrollar código flexible, adaptable y escalable que puede crecer y evolucionar a medida que cambian sus proyectos y requisitos le permitirá asumir cualquier desafío que se le presente. Por lo tanto, adopte la palabra clave "esto", domínela y conviértase en un verdadero ninja de JavaScript.