Usando o this (this Keyword)

Olá HaWker! Jeff Bruchado por aqui.

Esse é mais um artigo da nossa série de artigos que vai cobrir a nossa jornada para Aprender Programação do Zero.

Hoje será um artigo sobre um conteúdo que poucas pessoas realmente entendem.

Bom, sem mais delongas, vamos começar!

Hoje, nós vamos falar sobre o 'this':

Vamos começar imaginando que você está trabalhando em um projeto, uma aplicação que tem várias abas diferentes.

Em cada aba, você quer mostrar informações específicas do usuário que tá logado, como nome, e-mail, e outras informações...

Você deve tá pensando: "Beleza, mas como eu faço pra saber qual usuário tá em qual aba sem fazer uma bagunça?"

E é aí que entra o famoso this.

O this é como se fosse um GPS no seu código. Ele te ajuda a entender onde você está e a que dados você tem acesso naquele contexto específico.

Existem 3 motivos que fazem ele ser importante? Olha só:

Contexto: O this te dá o contexto. Dependendo de onde você o usa, ele pode se referir a coisas diferentes. Por exemplo, dentro de um método de um objeto, this se refere ao próprio objeto.

Flexibilidade: Ele faz seu código mais flexível. Você pode usar a mesma função em diferentes objetos, e o this vai se adaptar ao objeto que tá chamando a função.

Clareza: O this ajuda a deixar claro a que você tá se referindo. Sem ele, seria fácil se perder no meio de tantas variáveis e funções.

Pensa no this como um espelho mágico. Dependendo de como você olha pra ele, ele mostra coisas diferentes.

Por exemplo, se você está em um método de um objeto:

let usuario = {  nome: 'João',  mostrarNome: function () {    console.log(this.nome);  },};usuario.mostrarNome(); // Aqui, 'this' se refere ao objeto 'usuario'

Nesse caso, this.nome é o JavaScript dizendo "Ei, eu estou falando do nome DO USUÁRIO que chamou essa função".

Então, como você pode perceber, entender o this é crucial porque ele te dá controle e clareza sobre o que seu código está fazendo em diferentes contextos.

Sem ele, você poderia ficar totalmente perdido no seu próprio código, tentando encontrar a saída de um labirinto no escuro.

Com o this, você tem uma lanterna!

Bom, a seguir vamos nos aprofundar mais sobre esse assunto.

Entendendo o this em JavaScript

Entender o conceito do this no JavaScript pode ser um pouco complexo para um iniciante, porém, se você entender esse conceito, vai conseguir entender a fundo como funcionam os mecanismos que os Frameworks mais modernos utilizam.

(Nesse instante você vai entender o porque de eu ter repetido algumas vezes o conceito de escopo nos últimos artigos)

Basicamente a palavra reservada "this" se refere ao objeto atual no qual o código está sendo executado. Ela pode ser usada em diferentes contextos e o valor que assume pode variar dependendo do contexto em que é usada.

Por exemplo, ao usar this dentro de uma função, ele se refere ao objeto global, enquanto que, quando usado dentro de um método de um objeto, ele se refere ao próprio objeto.

Exemplo de código no JavaScript que ilustra o uso de this:

const obj = {  prop: 'valor da propriedade',  method() {    console.log(this.prop);  },};obj.method(); // imprime "valor da propriedade"

Neste exemplo, o valor de this dentro do método method é o objeto obj. Portanto, ao acessar a propriedade prop usando this.prop, o valor da propriedade é impresso no console.

Também existem algumas regras gerais sobre o uso do this:

• Quando this é usado dentro de uma função global, ele se refere ao objeto global (que no caso do navegador é o objeto window).
• Quando this é usado dentro de um método de um objeto, ele se refere ao próprio objeto.
• Quando this é usado dentro de uma função anônima que é passada como argumento para outra função, o valor de this dependerá da forma como a função anônima é chamada.
• É possível usar o operador bind para alterar o valor de this para um objeto específico, independentemente do contexto em que a função é chamada.

Exemplo mais detalhado que ilustra alguns desses casos:

// Função globalfunction func() {  console.log(this); // se refere ao objeto global (no caso do navegador, o objeto "window")}func(); // imprime o objeto "window"// Método de um objetoconst obj = {  prop: 'valor da propriedade',  method() {    console.log(this); // se refere ao objeto "obj"  },};obj.method(); // imprime o objeto "obj"// Função anônima passada como argumentofunction outraFunc(callback) {  callback();}outraFunc(function () {  console.log(this); // se refere ao objeto global (no caso do navegador, o objeto "window")});// Usando "bind" para alterar o valor de "this"const obj2 = {  prop: 'outro valor da propriedade',};function terceiraFunc() {  console.log(this.prop);}const novaFunc = terceiraFunc.bind(obj2);novaFunc(); // imprime "outro valor da propriedade"

this em Arrow Functions

Antes de explicar sobre o this em Arrow Functions, eu preciso que você entenda sobre contexto léxico (lexical context).

Contexto Léxico (Lexical context)

O Contexto léxico se refere ao contexto no qual uma função foi escrita.

Isso inclui o local onde a função foi definida e todas as variáveis e funções que estavam disponíveis no momento em que a função foi escrita.

Por exemplo:

const x = 'global';function test() {  const x = 'local';  console.log(x);}test(); // Output: "local"console.log(x); // Output: "global"

Neste caso, quando chamamos a função test(), o valor de x que é impresso é "local", pois este é o valor de x no contexto léxico da função test().

Já quando chamamos console.log(x) no exterior da função test(), o valor de x é "global", pois este é o valor de x no contexto léxico global.

O this nas Arrow Functions

Em funções normais ( function() ), o this se refere ao objeto que chama a função.

Por exemplo:

const person = {  name: 'Jeff',  greet: function () {    console.log(`Hello, my name is ${this.name}`);  },};person.greet(); // Output: "Hello, my name is Jeff"

Já nas arrow functions, o this se refere ao contexto léxico, ou seja, ao contexto no qual a função foi escrita.

Vou tentar explicar melhor com um exemplo:

const person = {  name: 'Jeff',  greet: () => {    console.log(`Hello, my name is ${this.name}`);  },};person.greet(); // Output: "Hello, my name is undefined"

Neste caso, o this não se refere ao objeto person, mas sim ao contexto global.

Por isso, ao tentarmos acessar a propriedade name do objeto person, o valor retornado é undefined.

No entanto, é possível utilizar o this de forma diferente nas arrow functions, utilizando a palavra-chave bind().

A função bind() permite que você "amarre", o valor de this a uma variável ou objeto específico.

Veja o exemplo abaixo:

const person = {  name: 'Jeff',  greet: function () {    console.log(`Hello, my name is ${this.name}`);  },};const greet = person.greet.bind(person);greet(); // Output: "Hello, my name is Jeff"

Neste caso, ao utilizarmos o bind() para "amarrar" o valor de this ao objeto person, conseguimos acessar a propriedade name do objeto person dentro da função greet().

Conclusão

Em resumo, o this é utilizado em funções normais ou em arrow functions.

O seu valor e comportamento podem variar dependendo do contexto em que é utilizado. Em funções normais, o this se refere ao objeto que chama a função.

Já nas arrow functions, o this se refere ao contexto léxico, ou seja, ao contexto no qual a função foi escrita.

Isso pode ser um pouco confuso, mas a regra geral é que o this se refere ao objeto que chama a função em funções normais, e ao contexto léxico em arrow functions.

É importante lembrar que o this pode ser "amarrado" (bind) a um valor específico utilizando a função bind().

Isso pode ser útil quando queremos utilizar o this de forma diferente do padrão em arrow functions, por exemplo.

Com isso, eu espero ter ajudado a esclarecer sobre esse temido assunto que é o this no JavaScript.

Pois bem HaWker, chegamos ao fim de mais um artigo.

Como sempre, se tiver qualquer dúvida ou quiser explorar mais algum ponto, é só responder com a sua dúvida, nesse email.

E lembre-se, estou aqui para te ajudar a melhorar 1% a cada novo artigo!

Se você chegou até aqui, como de costume, por favor, responda esse email com "Consegui finalmente entender para que serve o this".

Dessa forma eu vou saber que essa série de artigos está sendo útil pra você, e que você está acompanhando e aproveitando.

Como você já sabe! Somente um verdadeiro HaWker chega até o final.

Parabéns!

Estou feliz em te ter aqui.

Te vejo em breve.

Bora pra cima! 🦅

- Jeff Bruchado

Quando sentir que é o momento existem 2 maneiras em que posso te ajudar:

01) Aprendendo JavaScript do Zero: Torne-se um programador de valor e aprenda a programar usando JavaScript, com um conteúdo organizado e condensado pensado no que realmente importa você aprender. O conteúdo possui todos os artigos que venho disponibilizando semanalmente pra você, e também possui exercícios práticos, com as respostas pra você aprender a teoria e já sair colocando a mão na massa.

02) Consultoria: Faça parte da minha mentoria e tenha aulas diretamente comigo. Se você se interessar por isso, responda esse email com "Tenho interesse na mentoria."

Parabéns por chegar até aqui, HaWker! 🎉

Nesse momento que você aprendeu sobre o uso da palavra-chave this no JavaScript, que tal testar seus conhecimentos? Participe do quiz abaixo e veja o quanto você absorveu do nosso artigo.

É uma ótima maneira de fixar o aprendizado e se preparar para os próximos passos na sua jornada de programação.

Aperte para acessar o quiz.

Boa sorte e divirta-se!