Fundamentos do Trabalho com Contexto em JavaScript

Suponha que temos uma função func, dentro da qual é usado this:

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

Para o que this aponta dentro desta função? E nós não sabemos. E o JavaScript não sabe. E a própria função não sabe. Ou seja, no momento da criação da função, para o que exatamente this aponta não está definido. E isso só será definido quando essa função for chamada.

Suponha que temos algum input:

<input id="elem" value="text">

Vamos vincular a este input nossa função func para que ela seja executada quando o input perder o foco. Agora, no momento da execução da função, this apontará para o nosso input:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // ao perder o foco exibirá 'text'
}

Mas podemos ter não um input, mas vários:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

E para cada um desses inputs podemos vincular nossa função func. Neste caso, para o primeiro elemento, o this no momento da chamada da função apontará para ele, e para o segundo - para ele.

Na prática, isso significa que this dentro da função depende de em qual dos inputs perdemos o foco:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // exibirá ou 'text1', ou 'text2'
}

No geral, essa característica do this é muito conveniente - criamos apenas uma função e a vinculamos a qualquer número de inputs. Se o this não apontasse para o elemento no qual o evento ocorreu, isso não seria possível - teríamos que criar para cada input sua própria função com o mesmo código!