Processo lógico - otimização - Javascript avançado aula 3

Na aula de javascript avançado I, video 3, ele fala de performance. lá temos as duas funções :

1-

class NegociacaoController {


    adiciona(event) {
        event.preventDefault();

        let $ = document.querySelector.bind(document);
        let inputData = $('#data');
        let inputQuantidade = $('#quantidade');
        let inputValor = $('#valor');

        console.log(inputData.value);
        console.log(inputQuantidade.value);
        console.log(inputValor.value);


    }
}

2-

class NegociacaoController {

    constructor() {
        let $ = document.querySelector.bind(document);
        this.inputData = $('#data');
        this.inputQuantidade = $('#quantidade');
        this.inputValor = $('#valor');

    }

    adiciona(event) {
        event.preventDefault();


        console.log(this.inputData.value);
        console.log(this.inputQuantidade.value);
        console.log(this.inputValor.value);


    }
}

Eu entendi o motivo pelo qual ele faz isso.. mas eu não entendo o processo lógico do porquê no primeiro modo, se tiver 100 entradas o querrySelector vai percorrer o DOM 100 vezes, e no segundo modelo ele só vai percorrer uma vez o DOM. alguém pode me explicar isso? obrigado.