Neste tutorial, você aprenderá sobre essa palavra-chave do JavaScript com a ajuda de exemplos.
Em JavaScript, thispalavra-chave se refere ao objeto onde é chamada.
1. este escopo global interno
Quando thisusado sozinho, thisrefere-se ao objeto global ( windowobjeto em navegadores). Por exemplo,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Aqui, this.nameé o mesmo que window.name.
2. esta função interna
Quando thisé usado em uma função, thisrefere-se ao objeto global ( windowobjeto em navegadores). Por exemplo,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. esta função interna do construtor
Em JavaScript, as funções construtoras são usadas para criar objetos. Quando uma função é usada como função construtora, thisrefere-se ao objeto dentro do qual é usada. Por exemplo,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Resultado
Pessoa (nome: "Jack") Jack
Aqui, thisrefere-se ao objeto person1. É por isso que person1.namenos dá Jack.
Nota : Quando thisé usado com classes ES6, refere-se ao objeto dentro do qual é usado (semelhante às funções do construtor).
4. este método do objeto interno
Quando thisé usado dentro do método de um objeto, thisrefere-se ao objeto no qual se encontra. Por exemplo,
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();
Resultado
(nome: "Jack", idade: 25, cumprimenta: ƒ) Jack
No exemplo acima, thisrefere-se ao personobjeto.
5. esta função interna interna
Quando você acessa thisdentro de uma função interna (dentro de um método), thisrefere-se ao objeto global. Por exemplo,
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();
Resultado
(nome: "Jack", idade: 25, saudação: ƒ) 25 Janela (…) indefinida
Aqui, thisdentro innerFunc()se refere ao objeto global porque innerFunc()está dentro de um método.
Porém, this.agefora innerFunc()se refere ao personobjeto.
6. esta função de seta interna
Dentro da função de seta, thisrefere-se ao escopo pai. Por exemplo,
const greet = () => ( console.log(this); ) greet(); // Window (… )
As funções de seta não têm suas próprias this. Quando você usa thisdentro de uma função de seta, thisrefere-se ao seu objeto de escopo pai. Por exemplo,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Aqui, this.namedentro da hi()função se refere ao greetobjeto.
Você também pode usar a função de seta para resolver o problema de ter undefinedao usar uma função dentro de um método (como visto no Exemplo 5). Por exemplo,
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();
Resultado
(nome: "Jack", idade: 25, cumprimentar: ƒ) 25 (nome: "Jack", idade: 25, cumprimentar: ƒ) 25
Aqui, innerFunc()é definido usando a função de seta. Ele tira thisdo seu escopo pai. Portanto, this.agedá 25 .
Quando a função de seta é usada com this, ela se refere ao escopo externo.
7. esta função interna com modo estrito
Quando thisé usado em uma função com modo estrito, thisé undefined. Por exemplo,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Nota : Ao usar thisdentro de uma função com modo estrito, você pode usar JavaScript Function call ().
Por exemplo,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Quando passa thiscom a call()função, greet()é tratado como o método do thisobjeto (objeto global neste caso).
