¿Qué es la palabra clave «Esta» en JavaScript?

Funciones, objetos y this todas las palabras clave están interconectadas en JavaScript. Cuando se llama a una función, this variable se establece en un objeto específico. Sin embargo, el valor de this solo depende cómo la función fue llamada.

En esta publicación, exploraremos diferentes formas en que podemos llamar funciones, así como también cómo cada una de ellas establece el valor de this un poco diferente

“Esto” en funciones constructoras.

Un lugar donde comúnmente verá el this La palabra clave está dentro de las funciones del constructor. Considere el siguiente ejemplo:

function Course(id, name) {
 this.id = id;
 this.name = name;
 
 this.describe = function () {
   console.log(`Course ${this.id}: ${this.name}`);
 };
}
 
const spanish = new Course("SPA-001", "Spanish 1");

en lo anterior Course() constructor describe referencias de métodos this.id y this.name. Ya que invocamos el Course() función con el nuevo operador, this se establece en el objeto recién creado: spanish.

{
 id: "SPA-001",
 name: "Spanish 1",
 describe: function () {
   console.log(`Course ${this.id}: ${this.name}`);
 }
}

Como resultado, desde this se convierte en el spanish objeto, y podemos acceder a las propiedades directamente desde ese objeto:

console.log(spanish.id); // "SPA-001"
console.log(spanish.name); // "Spanish 1"

Es más: el describe() El método puede usar efectivamente this para acceder a la id y name propiedades de ese objeto. Esto hace posible la siguiente llamada al método:

console.log(spanish.describe()); // "Course SPA-001: Spanish 1"

Para recapitular: cuando invocamos una función constructora con el operador new, el valor de this se establece en ese objeto recién creado (es decir, instanciado).

“Esto” en métodos.

Otro lugar donde comúnmente verás this está dentro de los métodos de objeto. En este contexto, el valor de this en realidad no está asignado a nada hasta que un objeto llama al método donde this se usa En otras palabras, el valor asignado a this se basa en el objeto que invoca el método donde this se define.

Considere el siguiente ejemplo:

const printer = {
 print: function () {
   console.log("Printing...");
 },
 printTwice: function () {
   this.print();
   this.print();
 },
};

Si invocamos la printer métodos del objeto:

printer.print();
// "Printing..."
 
printer.printTwice();
// "Printing..."
// "Printing..."

Sabemos que cuando llamamos printer.print() (oro printer.printTwice()) una variable this se establece Ya que this puede acceder al objeto al que fue llamado (es decir, printer), printTwice puedo usar this a acceso directo té printer objeto que contiene el print método. En otras palabras: this.print() dice printTwice para mirar printer – el objeto sobre el que se invocó el método – para encontrar print.

Como tal, al invocar un método en un objeto, this se establece en el objeto en sí!

“Esto” en funciones.

Hasta ahora, hemos visto lo que sucede con this al invocar una función constructora con el operador new, así como lo que sucede con this al llamar a una función que pertenece a un objeto (es decir, un método). ¿Qué sucede cuando simplemente invocamos una función regular por sí sola?

Considere la siguiente función que simplemente devuelve this:

function funFunction() {
 return this;
}

cuando invocamos funFunction(), this establecido en el objeto de la ventana, que es el objeto global si el entorno host es el navegador.

funFunction(); // (returns the global object, window)

Para verificar las propiedades y los métodos disponibles en el objeto devuelto, intente ejecutar el código anterior en la consola de desarrollador de su navegador (por ejemplo, Chrome DevTools).

Palabra clave “Esta”, recapturada.

Cuando se llama a una función, una variable this se establece en un valor determinado. pero dependiendo de cómo la funcion se llama como this se refiere puede ser muy diferente:

• Si se llama a una función constructora con un nuevo operador, this se establece en el objeto recién creado
• Si se llama a un método en un objeto, this se establece en ese objeto particular en sí mismo
• Si simplemente se invoca una función normal, this se establece en el objeto de ventana (o global)

Aprende más.

Además de todo esto, existen aún más formas de invocar funciones: con apply() y con call(). Ambos métodos comparten bastantes similitudes, y cada uno nos permite especificar cómo queremos configurar this.

Para una mirada más cercana a esos métodos, así como una visión general ampliada de los this palabra clave en JavaScript, consulte estos recursos:

O explore el programa Intermediate JavaScript Nanodegree para dominar el lenguaje de programación más popular del mundo.

COMIENZA A APRENDER