esta palabra clave en JavaScript

JavaScript ‘esto’ palabra clave : Aquí, vamos a aprender sobre la ‘esta’ palabra clave en JavaScript con ejemplos .

JavaScript ‘esto’ palabra clave

El esta palabra clave se utiliza ampliamente en JavaScript. Tiene muchos casos de uso, y es también una de las características más intimidantes de JavaScript. En la mayoría de los lenguajes de programación, este se utiliza para referirse a la instancia actual de un objeto. Permítanme asegurarles sin embargo, que para el final de este artículo podrás mucha confianza en la comprensión de este .

Primero vamos a tener una idea general de este. Digamos que usted tiene un coche class que tiene tres miembros de datos modelo , tipo y precio . Los nombres de las variables class la modelo , tipo y precio son los mismos. Si invocamos la función constructora de coches para inicializar los miembros de datos con algunos valores, podemos utilizar este para referirse a la instancia actual de coche . Podemos hacer algo como esto,

class Car {
var model, type, price;
Car(model, type, price) {
this - > model = model;
this - > type = type;
this - > price = price;
}
}

Hemos utilizado este para evitar confusiones entre los parámetros pasados ​​a la función constructora y los miembros de datos de la class coche .

Esta es este , en un contexto general. Vamos a explorar en JavaScript ahora.

esto es una palabra clave reservada en JavaScript que hace mucho más de lo que vimos anteriormente.

Su valor está determinado por el contexto de ejecución.

El contexto de ejecución se determina por la función se llama o invoca? Así que estamos asociando esto a las funciones en lugar de clases? Sí, recuerde que esta en JavaScript llega a existir sólo cuando se define una función. Cada vez que se ejecuta la función de definición, obtenemos esta definido class una función.

Antes de explicar el contexto de ejecución y cómo esto se relaciona con las funciones, vamos a ver esto en acción en vivo.

console.log(this);

salida

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Si expande la ventana, se obtiene una carga completa de métodos y propiedades. Cada vez que hablamos de este , nos imaginamos a su alcance. El alcance de esta se define como qué objeto se refiere a. Desde que escribimos absolutamente nada anteriormente, este se refiere al objeto global o ventana.

bien, por lo que tiene tres reglas de oro para determinar el contexto de esta . Echemos un vistazo a estas reglas una por una,

1) La Regla Global

A menos que tengamos este interior de un objeto, apuntará o hacer referencia al objeto global y la objeto global en JavaScript es el objeto de la ventana. El ejemplo que vimos anteriormente describe la regla global.

function Person() {
this.person = 'Fuzzy';
//this points to global object
}
Person();
console.log(person);

salida

Fuzzy

persona se convierte en una variable global como se declara en el objeto global. Tenemos este ni cerca de cualquier tipo de objeto que sea. Tenemos una función, por lo que este entra en existencia y se ve class un objeto de asociar su alcance con. No encuentra dicho objeto y la misma se fija a la ventana de objeto según la norma mundial.

2) Implícita Encuadernación

Siempre declaramos este en el interior de un objeto declarado, el valor de este se aproxima a la de ella del objeto padre.

var person = {
name: 'Fuzzy',
greet: function() {
return 'Hello' + this.name;
},
scopeThis: function() {
return this === person;
}
}
person.greet();
person.scopeThis();

salida

"HelloFuzzy"
true

Tenemos una función greet () donde utilizamos este . Así que esto viene a la existencia y se asocia con la función saludar () . Se propaga hacia arriba para ver si está unido a cualquier objeto y se encuentra envuelto dentro del objeto persona . Por lo que el alcance de esta , en este class, es la persona objeto de acuerdo con norma vinculante implícita .

¿Cuál será el alcance de esta en el siguiente ejemplo?

var person= {
Name: 'Fuzzy', scopeThis: this
}
person.scopeThis;

salida

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

¿Se adivina el alcance de esta ser persona ? Recuerde, este sólo llega a existir cuando una función está asociada con ella. Desde scopeThis no es una función, esto supone que su valor habitual. El norma vinculante implícita no es cierto y este toma el valor del objeto global o ventana usando la regla global.

3) La unión explícita

Podemos elegir lo que queremos el contexto de este a estar utilizando la llamada (), aplicar () y bind (). Invocamos estos métodos sólo en funciones.

  • call () : Toma thisArg, a, b, c, d, … como parámetros y se invoca inmediatamente.
  • aplicar () : Toma thisArg, [a, b, c, d, …] como parámetros y se invoca inmediatamente.
  • bind () : Toma thisArg, a, b, c, d, … como parámetros y se invoca después de algunas vueltas de tiempo una definición de función.

var person={
Name: 'Fuzzy',
Greet: function(){
return 'Hello'+this.name;
},
scopeThis: function(){
return this===person;
},
dog:{
Bark: function(){
return 'Barking' + this.name;
},
scopeThis: function(){
return this===person;
}
}
}
person.dog.scopeThis();
person.dog.scopeThis.call(person);

salida

false
true

person.dog.scopeThis () retornos falsos ya que esto lleva a la unión del perro objeto de acuerdo con nuestra norma vinculante implícito y person.dog .scopeThis (). llamadas () devuelve true ya que estamos establecer explícitamente el valor del contexto de esta a ser la de la persona objeto .

Otro ejemplo en el que podemos utilizar llamada () también establecer explícitamente el valor de este a ser cualquier cosa según nuestro deseo.

var person={
name: 'Fuzzy',
greet: function(){
return 'Hello' + this.name;
}
}
var dog={
name: ' Cooper'
}
person.greet.call(dog);

salida

"Hello Cooper"

Llamamos greet () función, un miembro del objeto persona pero regresó el nombre del perro objeto utilizando este . Nos unen de forma explícita esta a un objeto externo perro usando llamada () .

var person = {
name: 'Fuzzy',
greet: function() {
setTimeout(function() {
console.log('Hello' + this.name);
}, 1000);
}
}
person.greet()

salida

'Hello'

En el ejemplo anterior, obtenemos el valor de este que no está definido y tenemos la Hola indefinido en la consola. Se puede adivinar por qué?

Por el momento nuestra setTimeout () carreras de función, que han perdido la unión de este a que es más cercano objeto padre. Por lo tanto el más cercano padres objeto de esta es el objeto global o de la ventana y el nombre no es una propiedad definida for este más. Una solución, este sería el uso de la bind () método.

var person = {
name: 'Fuzzy',
greet: function() {
setTimeout(function() {
console.log('Hello' + this.name);
}.bind(this), 1000);
}
}

salida

'Hello Fuzzy'

Ahora tenemos Hola Fuzzy exactamente lo que queríamos.

Además de todo esto , si definimos un objeto utilizando la palabra clave nueva obtenemos el significado general de este . este se une automáticamente a sí mismo a la instancia actual del objeto definido usando el nuevo palabra clave.

Recuerde usar todas las reglas de forma independiente mientras se comprueba el alcance de esta.

espero que esto no era demasiado duro (nunca mejor dicho).


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *