En este tutorial, aprenderá sobre esta palabra clave de JavaScript con la ayuda de ejemplos.
En JavaScript, la thispalabra clave se refiere al objeto donde se llama.
1. este alcance global interno
Cuando thisse usa solo, se thisrefiere al objeto global ( windowobjeto en los navegadores). Por ejemplo,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Aquí, this.namees lo mismo que window.name.
2. esta función interior
Cuando thisse usa en una función, se thisrefiere al objeto global ( windowobjeto en los navegadores). Por ejemplo,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. esta función de constructor interno
En JavaScript, las funciones de constructor se utilizan para crear objetos. Cuando una función se usa como función constructora, se thisrefiere al objeto dentro del cual se usa. Por ejemplo,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Salida
Persona (nombre: "Jack") Jack
Aquí, se thisrefiere al objeto person1. Por eso, person1.namenos da Jack.
Nota : Cuando thisse usa con las clases de ES6, se refiere al objeto dentro del cual se usa (similar a las funciones de constructor).
4. este método de objeto interior
Cuando thisse usa dentro del método de un objeto, se thisrefiere al objeto en el que se encuentra. Por ejemplo,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.name); ) ) person.greet();
Salida
(nombre: "Jack", edad: 25, saludo: ƒ) Jack
En el ejemplo anterior, se thisrefiere al personobjeto.
5. esta función interior interior
Cuando accedes thisdentro de una función interna (dentro de un método), se thisrefiere al objeto global. Por ejemplo,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); // (name: "Jack", age… ) console.log(this.age); // 25 // inner function function innerFunc() ( // this refers to the global object console.log(this); // Window (… ) console.log(this.age); // undefined ) innerFunc(); ) ) person.greet();
Salida
(nombre: "Jack", edad: 25, saludo: ƒ) 25 Ventana (…) indefinido
Aquí, thisinside se innerFunc()refiere al objeto global porque innerFunc()está dentro de un método.
Sin embargo, this.ageafuera se innerFunc()refiere al personobjeto.
6. esta función de flecha interior
Dentro de la función de flecha, se thisrefiere al ámbito principal. Por ejemplo,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Las funciones de flecha no tienen las suyas propias this. Cuando se utiliza thisdentro de una función de flecha, se thisrefiere a su objeto de ámbito principal. Por ejemplo,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Aquí, this.namedentro de la hi()función se refiere al greetobjeto.
También puede usar la función de flecha para resolver el problema de tener undefinedal usar una función dentro de un método (como se ve en el Ejemplo 5). Por ejemplo,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.age); // inner function let innerFunc = () => ( // this refers to the global object console.log(this); console.log(this.age); ) innerFunc(); ) ) person.greet();
Salida
(nombre: "Jack", edad: 25, saludo: ƒ) 25 (nombre: "Jack", edad: 25, saludo: ƒ) 25
Aquí, innerFunc()se define mediante la función de flecha. Toma thisde su ámbito principal. Por lo tanto, this.ageda 25 .
Cuando se usa la función de flecha con this, se refiere al alcance externo.
7. esta función interior con modo estricto
Cuando thisse utiliza en una función con modo estricto, thises undefined. Por ejemplo,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Nota : Cuando se usa thisdentro de una función con modo estricto, puede usar la llamada de función JavaScript ().
Por ejemplo,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Cuando pasa thiscon la call()función, greet()se trata como el método del thisobjeto (objeto global en este caso).
