¿Cuál es la palabra clave esta en JavaScript??

Si ha programado en Java, C ++ o cualquier otro idioma, debe estar familiarizado con la palabra clave "esto". Sin embargo, en JavaScript, funciona de manera un poco diferente. Es diferente porque JavaScript ofrece un modo estricto. El modo estricto es donde no podemos usar variables no declaradas. El modo estricto también ayuda a depurar.

La palabra clave "esto" se usa ampliamente en casi todos los idiomas de programación. Sin embargo, también es el concepto más confuso. Si es un principiante, no se preocupe, hoy cubriremos casi todo sobre la palabra clave "esto" en JavaScript junto con ejemplos. Así que siéntate fuerte y deja que el viaje comience.

¿Qué es la palabra clave "esta"?

La definición más simple de la palabra clave "esta" es que apunta o se refiere a un objeto al que pertenece. También podemos decir que hace referencia a ese objeto que está llamando a la función/método actualmente.

Ahora que sabemos lo que significa la palabra clave "esta", descubramos dónde se usa. El valor de la palabra clave "esta" también difiere en función de dónde se usa.

Usando "esta" palabra clave solo

La palabra clave "esto" se puede usar solo sin ningún método. Sin embargo, luego posee la referencia al objeto global. Por ejemplo:

const xyz = this;
alerta (xyz);

En este ejemplo, inicializamos una variable, que almacena la referencia al objeto global. Debe tenerse en cuenta que el objeto global de la ventana del navegador es [Ventana de objeto]. Cuando ejecutemos el siguiente código, obtendremos la siguiente alerta:

También podemos usar la palabra clave "esto" sola usando el modo estricto. La solución será la misma I-E, mostrará la alerta [Ventana de objeto]. El código se verá así:

const xyz = this;
alerta (xyz);

Usando "esta" palabra clave en función

Usar la palabra clave "esto" en una función es la forma predeterminada. La palabra clave "esta" también se referirá al objeto global en una función. Por ejemplo:

función myFunc ()
alerta (esto);

myFunc ();

Sin embargo, si usamos esta palabra clave en modo estricto, el resultado está indefinido. Es porque en modo estricto, JavaScript restringe el enlace predeterminado. Por ejemplo:

usar estricto ";
función myFunc ()
alerta (esto);

myFunc ();

En este ejemplo, usamos "usar estricto". Nos devolverán indefinidos cuando ejecutemos este código.

Usando "esta" palabra clave en los manejadores de eventos

Los manejadores de eventos manejan eventos. Por ejemplo, si hace clic en un botón, ese clic será manejado por los manejadores de eventos. Si queremos referirnos a ese elemento de botón en HTML desde el cual recibimos el clic, entonces usamos la palabra clave "esto".
Por ejemplo, supongamos que tenemos un botón. Queremos que se desvanezca una vez que hagamos clic en él. Lo lograremos mediante el siguiente código:

HTML:

Haz clic en mí para ver la magia

JavaScript:

const btn = documento.QuerySelector (".Vanish-btn ");
btn.addEventListener ('Click', function ()
este.estilo.display = "Ninguno";
)

En este código, en HTML primero creamos un botón con el nombre de clase de "Vanish-BTN". Después de eso, colocamos la etiqueta de script donde hacemos referencia al nombre del archivo de JavaScript. En el archivo JavaScript, primero obtenemos la referencia del botón en "BTN" con la ayuda del nombre de la clase. Después de eso, pusimos un oyente de eventos con el clic de un botón. En esto, siempre que se haga clic en el botón, la función de devolución de llamada se ejecutará donde se visualizamos el botón Ninguno.

Antes de hacer clic en el botón, el navegador se verá así:

Cuando hacemos clic en el Haz clic en mí para ver la magia botón se desvanecerá.

Enlace del método de objeto

Primero daremos algunos ejemplos y luego lo discutiremos para comprender el concepto. Sin embargo, tenga en cuenta que la palabra clave "esto" es el objeto del jugador definido en el siguiente ejemplo o el objeto principal al que está haciendo referencia.

const jugador =
Nombre: "Peligro",
Club: "Chelsea",
Camiseta: 10,
myFunc: function ()
devolver esto.nombre;

;
alerta (jugador.myFunc () + "juega para" + jugador.club);

En este ejemplo, iniciamos un objeto con el nombre de "Jugador". Especificamos sus propiedades como nombre, club y número de camisa. Después de eso, hicimos una función. Al final, alertamos a la función del objeto del jugador y al club para el que juega. Esto se usa en el myFunc () función. En esto, está haciendo referencia al nombre del jugador con las palabras clave "esto. nombre". El resultado dentro de una alerta se verá así:

Palabra clave "esto" en una función de flecha

Las funciones de flecha se introdujeron por primera vez en la versión ES6 y tienen una función similar a una función de JavaScript estándar, excepto que las funciones de flecha acortan la sintaxis.
Por ejemplo:

función myFunc ()
regresar "Campeones de Europa"

myFunc ();

Esto se puede escribir como:

const myFunc = () =>
regresar "Campeones de Europa";

La palabra clave "esto" se maneja de manera diferente en una función de flecha que en la función predeterminada. Para ser precisos, las funciones de flecha no tienen vinculación de la palabra clave "esto". Además, la palabra clave "esta" se refiere a la variable u objeto que definió la función de flecha.
Por ejemplo:

const jugador = () => (
Nombre: "Peligro",
Club: "Chelsea",
Camiseta: 10,
myFunc: function ()
devolver esto.nombre;

);
Alerta (Player ().myFunc ());

La palabra clave "esto" aquí hace referencia al jugador como el jugador definió la función de flecha.

Conclusión

En este artículo, discutimos qué es la palabra clave "esta" y cómo se usa. También discutimos dónde y cómo podemos usar la palabra clave "this". Todo esto con la ayuda de ejemplos. La palabra clave "esta" es un concepto importante de JavaScript y principalmente los principiantes luchan con esto. Esperamos que esta publicación haya aclarado las ambigüedades que pueda haber tenido.