Utilizar "this" ou "nomeDaVariavelEmSi": legibilidade x performance x erros etc

Oi Elías tudo bem?

Tem um artigo da Caelum muito bom sobre o assunto dá uma lida http://blog.caelum.com.br/as-multiplas-personalidades-do-this-em-javascript/

O this deixa o código mais legível pois assim como no português usamos pronomes o this é o pronome isto, este, esta.

Quanto a perfomance de tempo de execução é a mesma.

Quanto a erros não há nenhum benefício, tanto o this como a variável não dão erros se usado corretamente. Porém com o this você vai errar menos porque não precisa ficar digitando a variável mas eu nem levo isso em conta. Por outro lado você tem que saber bem quem é o this para não achar que é uma variável e depois ver que é outra. Na dúvida dá um console.log(this); para saber quem é ele.

Quanto a mudança de escopo o this esse artigo explica com detalhes https://felipenmoura.com/articles/escopo-this-e-that/

E não dá para saber usando o pesquisar quem é o this. Para sabe quem é o this o código deve estar bem indentando e vendo o this você vê dentro de que bloco ele tá e assim você sabe quem é ele.

É normal sentir desconforto ao usar o this no começo. Se sentir mais confortável pode usar variáveis sem o this. Mas com o tempo vai ficar mais fácil o uso.

Espero ter ajudado!!!

Fala aí Elias, tudo bem? Vamos lá:

Existe algum benefício na utilização do "this", ao invés do "nomeDaVariavelEmSi", em questão de legibilidade x performance x erros, etc?

Utilizar o this para referenciar algo do próprio objeto no caso do JavaScript é necessário, para ele consiga enxergar essa função, por exemplo:

class Pessoa {

    constructor(nome, sobrenome) {
        this.nome = nome
        this.sobrenome = sobrenome
    }

    get nomeCompleto() {
        return `${this.nome} ${this.sobrenome}`
    }

    ola() {
        console.log(`Olá ${this.nomeCompleto}`)
    }

}

Veja que dentro das funções nomeCompleto e ola está sendo necessário chamar o this, se você tentar tirá-lo o JavaScript irá entender como se fosse uma variável local e não algo que pertença a classe Pessoa.

Como identificar se um código adicionado em um já existente não vai mudar o escopo dos "this" já utilizados neste código? Pergunto porque só tomei conhecimento da mudança do escopo do "this", ao trocar o "for" por "forEach", devido à dúvida do fórum, ou seja, devem existir outras situações...

No código do Rodrigo (aluno que criou o tópico) o escopo de this mudou porque para utilizar o .forEach devemos passar uma função de callback como parâmetro, porém, essa função fez com que o contexto de this não fosse mais o input e sim o window.

Isso aconteceu porque o contexto de this dentro de uma função normal é quem o chamou, antes, quem tinha chamado a função era o input através do seu evento de input, mas, agora quem chamou a função era o .forEach.

Complementando sobre legibilidade: para identificar onde uma variável é utilizada (por ex., com "Ctrl + f"), como identificar a qual variável se referem os "this", quando houver mais de uma variável no código sendo acessada através dos "this"?

Bom, as variáveis sendo acessados pelo this serão os atributos/propriedade da classe, então sempre que usar o this você está se referindo a algo da classe.

Espero ter ajudado.

Olá André e Matheus,

Com certeza, ambos ajudaram, obrigado!

Uma pena não poder colocar as 2 respostas como solução, porque uma completa a outra (obs: sugeri essa ideia/funcionalidade a princípio um pouco estranha huahua).

At.te

Mágina Elias, sempre que precisar não deixe de criar suas dúvidas.

Independente da solução, o importante é você ter entendido e isso acho que conseguimos \o/

Abraços