Comprensión de la palabra clave "this" de JavaScript

Lo que hace el este ¿Qué significa palabra clave en JavaScript? ¿Y cómo puedes usarlo de manera práctica en tu programa JavaScript? Estas son algunas de las preguntas comunes que hacen los principiantes e incluso algunos desarrolladores de JavaScript experimentados sobre la este palabra clave.

Si eres uno de esos desarrolladores que se pregunta cuál es el este De qué se trata la palabra clave, entonces este artículo es para usted. Explora qué este hace referencia en diferentes contextos y familiarícese con algunos errores para evitar confusiones y, por supuesto, errores en su código.

"esto" dentro del ámbito global

En el contexto mundial, este devolverá el ventana objeto siempre que esté fuera de una función. El contexto global significa que no lo colocas dentro de una función.

if(true) {
console.log(this) // returns window object
}





instagram viewer
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Si ejecuta el código anterior, obtendrá el objeto de ventana.

"this" Funciones internas (métodos)

Cuando se usa dentro de funciones, este se refiere al objeto al que está vinculada la función. La excepción es cuando usas este en una función independiente, en cuyo caso devuelve el ventana objeto. Veamos algunos ejemplos.

En el siguiente ejemplo, el decir nombre La función está dentro del a mí objeto (es decir, es un método). En casos como este, este se refiere al objeto que contiene la función.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

este es el a mí objeto, así dicho este nombre dentro de decir nombre El método es exactamente el mismo que Mi nombre.

Otra forma de pensarlo es que todo lo que esté en el lado izquierdo de la función cuando se invoque será este. Esto significa que puedes reutilizar el decir nombre funcionar en diferentes objetos y este Se referirá a un contexto completamente diferente cada vez.

Ahora bien, como se mencionó anteriormente, este devuelve el ventana objeto cuando se utiliza dentro de una función independiente. Esto se debe a que una función independiente está vinculada al ventana objeto por defecto:

functiontalk() {
returnthis
}
talk() // returns the window object

Vocación hablar() es lo mismo que llamar ventana.talk(), y todo lo que esté en el lado izquierdo de la función se convertirá automáticamente este.

Como nota al margen, el este La palabra clave en la función se comporta de manera diferente en Modo estricto de JavaScript (vuelve indefinido). Esto también es algo a tener en cuenta cuando usas bibliotecas de UI que usan el modo estricto (por ejemplo, React).

Usando "esto" con Function.bind()

Puede haber escenarios en los que no puedas simplemente agregar la función a un objeto como método (como en la última sección).

Quizás el objeto no sea tuyo y lo estés sacando de una biblioteca. El objeto es inmutable, por lo que no puedes simplemente cambiarlo. En casos como este, aún puede ejecutar la declaración de función por separado del objeto usando el Función.bind() método.

En el siguiente ejemplo, el decir nombre La función no es un método en el a mí objeto, pero aún así lo vinculó usando el unir() función:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

Cualquier objeto al que pases unir() será utilizado como el valor de este en esa llamada de función.

En resumen, puedes utilizar unir() en cualquier función y pasar en un nuevo contexto (un objeto). Y ese objeto sobrescribirá el significado de este dentro de esa función.

Usando "esto" con Function.call()

¿Qué sucede si no desea devolver una función completamente nueva, sino simplemente llamar a la función después de vincularla a su contexto? La solución para eso es la llamar() método:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

El llamar() El método ejecuta inmediatamente la función en lugar de devolver otra función.

Si la función requiere un parámetro, puede pasarlo a través del llamar() método. En el siguiente ejemplo, está pasando el idioma al decir nombre() función, por lo que puedes usarla para devolver condicionalmente diferentes mensajes:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Como puede ver, puede simplemente pasar cualquier parámetro que desee a la función como segundo argumento del llamar() método. También puedes pasar tantos parámetros como quieras.

El aplicar() El método es muy similar al llamar() y unir(). La única diferencia es que pasas múltiples argumentos separándolos con una coma con llamar(), mientras que pasas múltiples argumentos dentro de una matriz con aplicar().

En resumen, enlazar(), llamar() y aplicar() todos le permiten llamar funciones con un objeto completamente diferente sin tener ningún tipo de relación entre los dos (es decir, la función no es un método en el objeto).

"esto" dentro de las funciones del constructor

Si llamas a una función con un nuevo palabra clave, crea una este objeto y lo devuelve:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

En el código anterior, creaste tres objetos diferentes a partir de la misma función. El nuevo La palabra clave crea automáticamente un enlace entre el objeto que se está creando y el este palabra clave dentro de la función.

"this" Funciones internas de devolución de llamada

Las funciones de devolución de llamada son diferente de las funciones regulares. Las funciones de devolución de llamada son funciones que pasas a otra función como argumento, por lo que pueden ejecutarse inmediatamente después de que la principal haya terminado de ejecutarse.

El este La palabra clave se refiere a un contexto completamente diferente cuando se usa dentro de funciones de devolución de llamada:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Después de un segundo de llamar al persona función constructora y creando una nueva a mí objeto, registrará el objeto de ventana como el valor de este. Entonces, cuando se usa en una función de devolución de llamada, este se refiere al objeto de ventana y no al objeto "construido".

Hay dos formas de solucionar este problema. El primer método es utilizar unir() para unir el persona función al objeto recién construido:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

Con la modificación anterior, este en la devolución de llamada apuntará al mismo este como función constructora (la a mí objeto).

La segunda forma de resolver el problema de este en funciones de devolución de llamada es mediante el uso de funciones de flecha.

"esto" Funciones de flecha interna

Las funciones de flecha son diferentes de las funciones regulares.. Puede hacer que su función de devolución de llamada sea una función de flecha. Con las funciones de flecha, ya no necesitas unir() porque se vincula automáticamente al objeto recién construido:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Más información sobre JavaScript

Ha aprendido todo sobre la palabra clave "this" y lo que significa en los diferentes contextos de JavaScript. Si es nuevo en JavaScript, se beneficiará enormemente al aprender todos los conceptos básicos de JavaScript y cómo funciona.