Compreendendo a palavra-chave JavaScript “this”

O que faz o esse palavra-chave em JavaScript significa? E como você pode usá-lo de forma prática em seu programa JavaScript? Estas são algumas das perguntas comuns que os novatos e até mesmo alguns desenvolvedores JavaScript experientes fazem sobre o esse palavra-chave.

Se você é um daqueles desenvolvedores que está se perguntando o que esse palavra-chave tem tudo a ver, então este artigo é para você. Explorar o que esse refere-se em diferentes contextos e familiarize-se com algumas dicas para evitar confusão e, claro, bugs em seu código.

"isto" dentro do escopo global

No contexto mundial, esse retornará o janela objeto, desde que esteja fora de uma função. Contexto global significa que você não o coloca dentro de uma função.

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

Se você executar o código acima, obterá o objeto window.

"this" Funções Internas (Métodos)

Quando usado dentro de funções, esse refere-se ao objeto ao qual a função está vinculada. A exceção é quando você usa esse em uma função autônoma, caso em que retorna o janela objeto. Vejamos alguns exemplos.

No exemplo a seguir, o digaNome função está dentro do meu objeto (ou seja, é um método). Em casos como este, esse refere-se ao objeto que contém a função.

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

esse é o meu objeto, assim dizendo este nome dentro de digaNome método é exatamente o mesmo que eu.nome.

Outra maneira de pensar nisso é que tudo o que estiver no lado esquerdo da função quando invocado será esse. Isso significa que você pode reutilizar o digaNome funcionam em diferentes objetos e esse se referirá a um contexto completamente diferente a cada vez.

Agora, como mencionado anteriormente, esse retorna o janela objeto quando usado dentro de uma função autônoma. Isso ocorre porque uma função autônoma está vinculada ao janela objeto por padrão:

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

Chamando falar() é o mesmo que ligar janela.talk(), e tudo o que estiver no lado esquerdo da função se tornará automaticamente esse.

Numa nota lateral, o esse palavra-chave na função se comporta de maneira diferente em Modo estrito do JavaScript (ele retorna indefinido). Isso também é algo para se ter em mente ao usar bibliotecas de UI que usam modo estrito (por exemplo, React).

Usando "isto" com Function.bind()

Pode haver cenários em que você não possa simplesmente adicionar a função a um objeto como um método (como na última seção).

Talvez o objeto não seja seu e você o esteja retirando de uma biblioteca. O objeto é imutável, então você não pode simplesmente alterá-lo. Em casos como este, você ainda pode executar a instrução de função separadamente do objeto usando o comando Função.bind() método.

No exemplo a seguir, o digaNome função não é um método no meu objeto, mas você ainda o vinculou usando o vincular() função:

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

Seja qual for o objeto para o qual você passa vincular() será usado como o valor de esse nessa chamada de função.

Em resumo, você pode usar vincular() em qualquer função e passar em um novo contexto (um objeto). E esse objeto substituirá o significado de esse dentro dessa função.

Usando "isto" com Function.call()

E se você não quiser retornar uma função totalmente nova, mas apenas chamar a função depois de vinculá-la ao seu contexto? A solução para isso é chamar() método:

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

O chamar() O método executa imediatamente a função em vez de retornar outra função.

Se a função requer um parâmetro, você pode passá-lo através do chamar() método. No exemplo a seguir, você está passando a linguagem para o digaNome() função, então você pode usá-la para retornar condicionalmente mensagens diferentes:

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 você pode ver, você pode simplesmente passar qualquer parâmetro que desejar para a função como o segundo argumento para o chamar() método. Você também pode passar quantos parâmetros desejar.

O aplicar() método é muito semelhante ao chamar() e vincular(). A única diferença é que você passa vários argumentos separando-os com uma vírgula com chamar(), enquanto você passa vários argumentos dentro de um array com aplicar().

Resumindo, bind(), call() e apply() todos permitem chamar funções com um objeto completamente diferente sem ter qualquer tipo de relacionamento entre os dois (ou seja, a função não é um método no objeto).

"this" dentro das funções do construtor

Se você chamar uma função com um novo palavra-chave, ela cria uma esse objeto e o retorna:

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

No código acima, você criou três objetos diferentes a partir da mesma função. O novo palavra-chave cria automaticamente uma ligação entre o objeto que está sendo criado e o esse palavra-chave dentro da função.

"this" dentro das funções de retorno de chamada

As funções de retorno de chamada são diferente das funções regulares. Funções de retorno de chamada são funções que você passa para outra função como argumento, para que possam ser executadas imediatamente após a execução da principal.

O esse palavra-chave refere-se a um contexto totalmente diferente quando usada dentro de funções de retorno de chamada:

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

Depois de um segundo ligando para o pessoa função construtora e criando uma nova meu objeto, ele registrará o objeto da janela como o valor de esse. Então, quando usado em uma função de retorno de chamada, esse refere-se ao objeto janela e não ao objeto "construído".

Existem duas maneiras de corrigir isso. O primeiro método é usar vincular() para vincular o pessoa função para o objeto recém-construído:

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

Com a modificação acima, esse no retorno de chamada apontará para o mesmo esse como a função construtora (o meu objeto).

A segunda maneira de resolver o problema de esse nas funções de retorno de chamada é usando funções de seta.

"this" dentro das funções de seta

As funções de seta são diferentes das funções regulares. Você pode transformar sua função de retorno de chamada em uma função de seta. Com as funções de seta, você não precisa mais vincular() porque ele se liga automaticamente ao objeto recém-construído:

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

Saiba mais sobre JavaScript

Você aprendeu tudo sobre a palavra-chave “this” e o que ela significa em todos os diferentes contextos do JavaScript. Se você é novo em JavaScript, se beneficiará muito ao aprender todos os fundamentos do JavaScript e como ele funciona.