Como fazer um closure em um loop JavaScript lembrar o valor da variável em cada iteração?

Olá! Comecei a estudar JavaScript e me deparei com um problema que não consigo entender. Tenho um loop onde crio handlers de eventos para vários botões. Cada botão deve exibir seu número ao clicar, mas, em vez disso, todos os botões exibem o mesmo número — o último valor do contador.

// Criando botões dinamicamente
for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'Botão ' + i;
    btn.addEventListener('click', function() {
        alert('Você clicou no botão número ' + i);
    });
    document.body.appendChild(btn);
}

Quando clico em qualquer botão, aparece a mensagem "Você clicou no botão número 5". Por que isso acontece? Eu esperava que cada botão lembrasse seu valor de i da iteração em que foi criado.

Ouvi algo sobre closures, mas não entendo como funcionam em um loop. Explique, por favor, como resolver esse problema corretamente. De preferência com exemplos.