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!
