A maioria das pessoas começa o JavaScript construindo coisas. Você conecta um botão, busca alguns dados e observa o DOM mudar. Então, as abstrações começam a vazar. Surgem bugs que não fazem sentido: variáveis existem antes de suas declarações, funções lembram de variáveis às quais não deveriam ter acesso, e a palavra-chave this aponta para o window, para um botão ou para nada. Esse é geralmente o momento em que você percebe que precisa olhar por baixo do capô e entender o que o motor está realmente fazendo.
Contexto de Execução: A Configuração de Duas Fases
Quando o motor JavaScript no seu navegador ou Node.js encontra um script, ele não simplesmente lê o arquivo de cima para baixo como uma pessoa lendo uma página. Em vez disso, ele
É comum ouvir que o JavaScript "move as declarações para o topo". Esse é um modelo mental útil, mas o código não é realmente reescrito. Durante a fase de criação de memória, o motor simplesmente registra as declarações antes do início da execução. Uma instrução como var x = 5; se comporta como se a declaração e a inicialização estivessem desacopladas. A declaração var x; é processada precocemente e inicializada como undefined. A atribuição x = 5; permanece exatamente onde você a escreveu e é executada durante a fase de execução.
Por causa disso, o var pode levar a resultados surpreendentes. Uma variável usada perto do topo de uma função pode conter undefined, mesmo que uma atribuição gigante esteja no final. O uso de let e const elimina essa armadilha específica, pois a zona morta temporal (temporal dead zone) força você a manter suas declarações acima do seu uso.
Como o this Obtém seu Valor
Se o contexto de execução e o escopo determinam onde as variáveis vivem, o this determina qual objeto está no comando no momento. Ao contrário das variáveis léxicas, o this não é decidido por onde uma função é escrita. Ele é decidido inteiramente pela forma como a função é chamada.
Default binding ocorre quando você invoca uma função simples e independente. No modo não estrito (non-strict mode), o this recua para o objeto global. Em um navegador, esse objeto é o window. Chame uma função sem qualquer contexto e você poderá, acidentalmente, estar tocando no estado global sem perceber.
Implicit binding acontece quando você chama uma função como um método de um objeto. Se você escrever user.sayName(), o ponto diz silenciosamente ao motor para definir o this como user durante a duração dessa chamada. O local da chamada importa mais do que o local da definição.
Explicit binding permite que você sobrescreva tudo manualmente. call() e apply() invocam uma função imediatamente, enquanto forçam o this a ser um objeto específico fornecido por você. A única diferença entre eles é como os argumentos são passados: call recebe uma lista separada por vírgulas, enquanto apply recebe um array. O bind() funciona de forma diferente. Ele não invoca a função imediatamente. Em vez disso, ele retorna uma nova função com o this permanentemente travado no valor que você forneceu. Isso é inestimável para callbacks que, de outra forma, poderiam perder seu contexto ao serem passados adiante.
New binding entra em jogo quando você usa a palavra-chave new antes de uma chamada de função. O motor constrói um objeto vazio novinho em folha, define seu vínculo de protótipo e aponta o this dentro do construtor para essa nova instância.
Escrevendo Código que Perdura
Entender a mecânica é apenas metade do ofício. A outra metade é escrever código que humanos consigam ler daqui a seis meses.
DRY (Don't Repeat Yourself) parece óbvio, mas é violado constantemente. Se você se pegar escrevendo a mesma lógica de validação ou o mesmo padrão de chamada de API em três arquivos diferentes, extraia-a. Escreva uma função. Uma única fonte de verdade significa um único lugar para atualizar quando os requisitos mudarem, e isso economiza tempo de formas difíceis de mensurar.
KISS (Keep It Simple, Stupid) é uma defesa contra o ego. Ternários aninhados e closures de uma única linha parecem inteligentes, mas custam horas durante a depuração. O padrão de closure que mostrei anteriormente é poderoso, mas aninhar cinco níveis apenas porque você pode é um erro. Código simples sobrevive à rotatividade de equipes, incidentes de produção e aqueles alertas no meio da noite quando algo quebra e ninguém lembra o porquê.
A Real Recompensa
Estudando a execução