A vantagem do this em JavaScript

Com base no que foi dito anteriormente, a vantagem especial do this ainda não é óbvia. Afinal, dentro da função de callback o nosso elemento já estará acessível - já que a variável elem será global para a nossa função func:

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  // aqui a variável elem com o nosso elemento está acessível
}

E, não é difícil perceber, que o conteúdo do this e o conteúdo da variável elem no nosso caso são iguais:

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  console.log(elem === this); // exibirá true
}

Então, qual é a vantagem especial do this? Ela se manifesta quando temos vários elementos, e a mesma função está vinculada a cada um deles.

Vamos ver um exemplo. Suponha que temos 3 botões:

html<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Vamos obter referências para eles em variáveis:

javascriptlet button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Vamos vincular a mesma função a estes botões:

javascriptbutton1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

E dentro da função, vamos exibir this.value:

javascriptfunction func() {
  console.log(this.value);
}

O resultado é que temos três botões. Clicar em qualquer botão fará com que a função func seja chamada. Ao mesmo tempo, a cada clique, o this conterá a referência ao botão no qual o evento ocorreu.

Ou seja, cada clique exibirá no console o value do botão que foi clicado, e isso será feito pela mesma função func! Essa é a vantagem de usar o this.