El JavaScript de esta palabra clave
Ejemplo
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
¿Qué es esto ?
La palabra clave de JavaScript thisse refiere al objeto al que pertenece.
Tiene diferentes valores dependiendo de dónde se utilice:
- En un método,
thisse refiere al objeto propietario . - Solo,
thisse refiere al objeto global . - En una función,
thisse refiere al objeto global . - En una función, en modo estricto,
thisesundefined. - En un evento,
thisse refiere al elemento que recibió el evento. - Métodos como
call(), yapply()pueden referirsethisa cualquier objeto .
esto en un método
En un método de objeto, thisse refiere al " propietario " del método.
En el ejemplo en la parte superior de esta página, thisse refiere al objeto persona .
El objeto persona es el propietario del método fullName .
fullName : function() {
return this.firstName + " " + this.lastName;
}
esto solo
Cuando se usa solo, el propietario es el objeto Global, por lo thisque se refiere al objeto Global.
En una ventana del navegador, el objeto global es [object Window]:
Ejemplo
let x = this;
En modo estricto , cuando se usa solo, thistambién se refiere al objeto Global
[object Window]:
Ejemplo
"use strict";
let x = this;
esto en una función (predeterminado)
En una función de JavaScript, el propietario de la función es el enlace predeterminadothis para .
Entonces, en una función, thisse refiere al objeto Global [object Window].
Ejemplo
function myFunction() {
return this;
}
esto en una Función (Estricta)
El modo estricto de JavaScript no permite el enlace predeterminado.
Entonces, cuando se usa en una función, en modo estricto, thises undefined.
Ejemplo
"use strict";
function myFunction() {
return this;
}
esto en los controladores de eventos
En los controladores de eventos HTML, thishace referencia al elemento HTML que recibió el evento:
Ejemplo
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Enlace de método de objeto
En estos ejemplos, thises el objeto persona (El objeto persona es el "propietario" de la función):
Ejemplo
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Ejemplo
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
En otras palabras: this.firstName significa la propiedad firstName de este objeto (persona).
Enlace de función explícita
Los métodos call()y apply()son métodos de JavaScript predefinidos.
Ambos se pueden usar para llamar a un método de objeto con otro objeto como argumento.
Puede leer más sobre call()y apply()más adelante en este tutorial.
En el siguiente ejemplo, al llamar a person1.fullName con person2 como argumento, thisse referirá a person2, incluso si es un método de person1:
Ejemplo
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"