JavaScript | este identificador

En JavaScript, ‘este’ identificador se puede usar en diferentes contextos y ámbitos. Repasemos cada uno para determinar qué es esto y cómo se decide.

Alcance global

Siempre que se utilice la palabra clave ‘this’ en el contexto global, es decir, no como miembro de una función o declaración de objeto, siempre se refiere al objeto global. El siguiente ejemplo ilustrará este comportamiento.

// Declaring variable in global context.
var a = "GFG";
console.log(a);
  
// Using this we refer to the Global Context.
// And update the value of a we declared previously.
this.a = "GeeksforGeeks";
console.log(a);

Producción:

GFG
GeeksforGeeks

Alcance Funcional

Si una función tiene una referencia ‘esto’ dentro de ella, se puede decir que esto se refiere a un objeto, no a la función en sí (que generalmente es el error más común que cometen los programadores).
Determinar a qué objeto apunta ‘esto’ depende de cómo se llamó a la función en primer lugar. El siguiente ejemplo arrojará algo de luz sobre el caso.

// Function that contains this.
function myFunc() {
  console.log( this.a );
}
  
var a = "Global";
  
// Owner of the function.
var myObj1 = {
  a: "myObj1",
  myFunc: myFunc
};
  
// Object other than the owner.
var myObj2 = {
  a: "myObj2"
};
  
// Call the function in Global Scope.
myFunc();
  
// Call the function from the reference of owner. 
myObj1.myFunc();
  
// Call the function from the reference
// of object other than the owner.
myFunc.call( myObj2 );
  
// Create a new undefined object.
new myFunc();

Producción:

Global
myObj1
myObj2
undefined

Al ver el ejemplo anterior, podemos ver cuatro formas diferentes en las que podemos determinar a qué apunta esto . Hay cuatro reglas sobre cómo se establece esto , expliquemos estas cuatro por nosotros mismos.

• En la primera llamada, myFunc() termina configurando esto en el objeto Global en modo no estricto. Mientras que, en modo estricto, esto no estaría definido y JavaScript arrojará un error al acceder a la propiedad.
• myObj1.myFunc() establece esto en el objeto myObj1, aquí myObj1 es el propietario de la función myFunc y estamos llamando a la función con la referencia del objeto en sí, por lo tanto, en tales casos, se referirá al objeto propietario.
• myFunc.call(myObj2) establece esto en el objeto myObj2. Esto prueba que esto no siempre apunta al objeto propietario, sino que apunta al objeto bajo cuyo alcance se llamó a la función.
• new myFunc() establece esto en un nuevo objeto vacío, por lo que quedamos sin definir en el registro de la consola.

Nota: Podemos determinar a quién se refiere ‘esto’ siguiendo esta sencilla técnica. Cada vez que se llame a una función que contenga ‘esto’, debemos mirar a la izquierda inmediata del par de paréntesis «()». Si en el lado izquierdo de los paréntesis hay una referencia, entonces “esto” se refiere al objeto al que pertenece, de lo contrario, se refiere al objeto global. Siempre que no hayamos usado ninguna Función especial para invocar la Función.

Dentro de un controlador de eventos

‘esto’ dentro de un controlador de eventos siempre se refiere al elemento en el que se activó. Veamos un ejemplo para ilustrar lo mismo.

<div id="clickMe">Welcome to GFG!</div>
  
function clickedMe() { 
    console.log(this.innerHTML); 
} 
  
clickedMe(); // undefined because global object. 
  
var myElem = document.getElementById('clickMe'); 
myElem.onclick = clickedMe; 
   
myElem.onclick(); // Welcome to GFG!

Producción:

undefined
Welcome to GFG!

Podemos ver aquí que la primera llamada se realizó en el ámbito global, por lo que ‘esto’ se refería al objeto global y se registró undefined. Luego, hemos copiado la función en el evento myElem.onclick, por lo tanto, cada vez que se invoca la función onclick, ‘esto’ se refiere al elemento myElem, que es el div con id clickMe, por lo tanto, «¡Bienvenido a GFG!» se registra

Ahora podemos decir que sabemos cómo se establece esto en un objeto en particular y tenemos un concepto erróneo menos del que preocuparnos.