Entrar Ainda não tem acesso?
1
resposta

Uso do this

Referente ao curso JavaScript: métodos de array, no capítulo Filter: aplicando diferentes filtros e atividade O que aprendemos?

por Vanilson da Conceição Sousa
| 17.2k xp | 3 posts
botoes.forEach(btn => btn.addEventListener("click", filtrarLivros));

function filtrarLivros(){
  const elementoBtn = document.getElementById(this.id); 
  let categoria = elementoBtn.value;
  let livrosFiltrados = livros.filter(livro =>
    livro.categoria == categoria)
    exibirLivrosNaTela(livrosFiltrados);
}

Eu não entendi direito o uso desse this no código. Como ele está se referenciando exatamente ao elemento btn que foi clicado sendo que nada foi passado como parâmetro para a function filtrarLivros?

1 resposta
por Breno Bosser Morim
| 891.3k xp | 102 posts
Estagiário em Desenvolvimento React

Olá! Tudo bem? Nesse contexto, o this está representando cada um dos botões da lista na variável botoes. Essa palavra reservada this faz referência a um contexto específico, quando estamos trabalhando com Programação Orientada a Objetos. O this simboliza o objeto que estamos trabalhando no momento, por exemplo:

class Pessoa {
    constructor(nome, idade) {
        this.nome = nome;
        this.idade = idade;
    }

    fazerAniversario() {
        this.idade += 1;
    }
}

const pessoa = new Pessoa('Breno', 19);

pessoa.fazerAniversario();

console.log(pessoa.idade);

O exemplo acima mostra o uso do this para referenciar e manipular o objeto que estamos trabalhando no momento, que no caso foi a pessoa 'Breno' que teve sua idade aumentada. Do mesmo modo que neste exemplo pessoa é um objeto, no caso do Front-End os elementos do DOM e do HTML também são objetos, então como no seu caso você está manipulando as funções click que existem nos objetos btn, você está trabalhando dentro do seu contexto como objeto. Portanto quando um botão executa uma função, essa função tem acesso ao próprio botão através do this, por exemplo: 

<html>
    <body>
        <button id="btn">Botão Legal</button>
        <script>
            document.getElementById("btn").addEventListener("click", mostrarTexto);

            function mostrarTexto() {
                console.log(this.textContent);
            }
        </script>
    </body>
</html>

Se apertarmos este botão, "Botão Legal" será impresso no console, isso acontece já que a função mostrarTexto é colocada dentro do contexto do objeto btn através do método addEventListener, este objeto que foi buscado no HTML representa o botão, assim temos acesso à propriedade textContent, assim como teríamos a outras propriedades como id, innerHTML, value e muitas outras que existem dependendo de qual tag HTML você está usando. Espero ter ajudado!