O que significa a palavra-chave this em JavaScript? E como você pode usá-lo de forma prática em seu programa JavaScript? Estas são algumas das perguntas comuns que iniciantes e até mesmo alguns desenvolvedores de JavaScript experientes fazem sobre a palavra-chave this.
Se você é um daqueles desenvolvedores que está se perguntando do que se trata a palavra-chave this, então este artigo é para você. Explore a que isso se refere em diferentes contextos e familiarize-se com algumas dicas para evitar confusão e, claro, bugs em seu código.
últimas postagens
“isto” dentro do escopo global
No contexto global, isso retornará o objeto window 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)
}let i = 2
while(i < 10) {
console.log(this)
i++
}
Se você executar o código acima, obterá o objeto window.
“this” dentro de funções (métodos)
Quando usado dentro de funções, refere-se ao objeto ao qual a função está vinculada. A exceção é quando você usa this em uma função autônoma, caso em que ele retorna o objeto window. Vejamos alguns exemplos.
No exemplo a seguir, a função sayName está dentro do objeto me (ou seja, é um método). Em casos como este, this refere-se ao objeto que contém a função.
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley",
sayName: sayName
}console.log(me.sayName())
este é o objeto me, então dizer this.name dentro do método sayName é exatamente o mesmo que me.name.
Outra maneira de pensar nisso é que tudo o que estiver no lado esquerdo da função quando invocado será isto. Isso significa que você pode reutilizar a função sayName em objetos diferentes e isso se referirá a um contexto completamente diferente a cada vez.
Agora, como mencionado anteriormente, isso retorna o objeto window quando usado dentro de uma função autônoma. Isso ocorre porque uma função autônoma está vinculada ao objeto window por padrão:
function talk() {
return this
}talk()
Chamar talk() é o mesmo que chamar window.talk(), e qualquer coisa que esteja no lado esquerdo da função se tornará automaticamente assim.
Por outro lado, a palavra-chave this na função se comporta de maneira diferente no modo estrito do JavaScript (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 da função separadamente do objeto usando o método Function.bind().
No exemplo a seguir, a função sayName não é um método no objeto me, mas você ainda a vinculou usando a função bind():
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk()
Qualquer objeto que você passar para bind() será usado como o valor this naquela chamada de função.
Em resumo, você pode usar bind() em qualquer função e passar um novo contexto (um objeto). E esse objeto irá sobrescrever o significado de this dentro daquela 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 é o método call():
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley"
}
sayName.call(me)
O método call() 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 método call(). No exemplo a seguir, você está passando a linguagem para a função sayName(), então você pode usá-la para retornar condicionalmente mensagens diferentes:
function sayName(lang) {
if (lang === "en") {
return `My name is ${this.name}`
} else if (lang === "it") {
return `Io sono ${this.name}`
}
}const me = {
name: "Kingsley"
}
sayName.call(me, 'en')
sayName.call(me, 'it')
Como você pode ver, você pode simplesmente passar qualquer parâmetro desejado para a função como o segundo argumento do método call(). Você também pode passar quantos parâmetros desejar.
O método apply() é muito semelhante a call() e bind(). A única diferença é que você passa vários argumentos separando-os com uma vírgula com call(), enquanto você passa vários argumentos dentro de um array com apply().
Em resumo, bind(), call() e apply() 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 uma palavra-chave new, ela criará um objeto this e o retornará:
function person(name){
this.name = name
}const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name
her.name
him.name
No código acima, você criou três objetos diferentes a partir da mesma função. A palavra-chave new cria automaticamente uma ligação entre o objeto que está sendo criado e a palavra-chave this dentro da função.
“this” dentro das funções de retorno de chamada
As funções de retorno de chamada são diferentes 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.
A palavra-chave this refere-se a um contexto totalmente diferente quando usada dentro de funções de retorno de chamada:
function person(name){
this.name = name
setTimeout(function() {
console.log(this)
}, 1000)
}const me = new person("Kingsley")
Depois de um segundo chamando a função construtora person e criando um novo objeto me, ele registrará o objeto window como o valor this. Portanto, quando usado em uma função de retorno de chamada, this se refere ao objeto window e não ao objeto “construído”.
Existem duas maneiras de corrigir isso. O primeiro método é usar bind() para vincular a função person ao objeto recém-construído:
function person(name){
this.name = name
setTimeout(function() {
console.log(this)
}.bind(this), 1000)
}const me = new person("Kingsley")
Com a modificação acima, this no retorno de chamada apontará para o mesmo this que a função construtora (o objeto me).
A segunda maneira de resolver o problema em funções de retorno de chamada é usando funções de seta.
“isto” 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 funções de seta, você não precisa mais de bind() porque ele se vincula automaticamente ao objeto recém-construído:
function person(name){
this.name = name
setTimeout(() => {
console.log(this)
}, 1000)
}const me = new person("Kingsley")
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.