Dúvida ao adicionar classe pelo javaScript

function tocaSom(idAudio){
    document.querySelector(idAudio).play();
}

const teclas = document.querySelectorAll('.tecla');

let i = 0;

while(i<teclas.length){

    const sons = teclas[i].classList[1];
    teclas[i].onclick = function(){
    tocaSom(`#som_${sons}`);
}

    teclas[i].onkeydown = function (){
    teclas[i].classList.add('ativa');
}
    i++;
}

Não entendi porque o código acima não funciona. Se eu atribuir o teclas[i] a uma constante, e no lugar do teclas[i] colocar a constante, aí sim funciona. Veja no código abaixo:

function tocaSom(idAudio){
    document.querySelector(idAudio).play();
}

const teclas = document.querySelectorAll('.tecla');

let i = 0;

while(i<teclas.length){

    const listaDeTeclas = teclas[i];
    const sons = listaDeTeclas.classList[1];

    listaDeTeclas.onclick = function(){
    tocaSom(`#som_${sons}`);
}

    listaDeTeclas.onkeydown = function (){
    listaDeTeclas.classList.add('ativa');
}
    i++;
}

Por que isso acontece?