Como sabemos, o JavaScript está em constante evolução, no repositório aberto do TC39 o que não faltam são novas propostas de novas funcionalidades para serem incorporadas à linguagem. Recentemente, uma chamou bastante atenção, o globalThis, que propõe uma nova forma padronizada de acessar o objeto global do JavaScript.
O escopo global
Como comentamos em um artigo anterior, o JavaScript possui um conceito bem definido de escopos. Cada novo escopo de uma função é um novo galho em uma árvore cuja raiz é chamada de “escopo global”. O escopo global é o único escopo que é acessível de todos os locais do código sem necessidade de importação de pacotes ou declarações. Existem dois tipos de variáveis globais:
- Variáveis globais declarativas: Que são as variáveis que declaramos fora do escopo de todas as funções, geralmente são aquelas que aparecem no topo do arquivo, com const ou let
- Variáveis do objeto global: Estas variáveis são propriedades do chamado “objeto global”. E podem ser criadas declarando-se variáveis no topo do arquivo com var ou então declarações de funções, também podem ser criadas através da manipulação do objeto global
Em um browser, o objeto global pode ser acessado pela chave globalThis. Por exemplo:
<script>
const x = 1
var y = 2
</script>
<script>
console.log(x) // 1js
console.log(y) // 2
console.log(globalThis.x) // undefined
console.log(globalThis.y) // 2
</script>Veja que todas as declarações seguem o mesmo escopo, se não nós não conseguiríamos ter chamado console.log(x) e y, porém nem todas elas criaram uma nova propriedade no objeto global, como y fez.
This
Em outro artigo comentamos sobre a keyword this e como ela se comporta em diversas situações. Em suma, quando não existe um receptor – que é um objeto de uma chamada de um método – o valor de this depende do escopo no qual ele está inserido:
- Em scripts no top level: objeto global
- Top level de módulos do ES:undefined
- Durante uma chamada de função:
– No strict mode:undefined
– Fora do modo estrito: tem o mesmo escopo do this global
Uma informação interessante é que o this global não aponta diretamente para o objeto global quando estamos em ambientes de browser. Por exemplo, consideremos um iFrame em uma página qualquer. Sempre que o src do iFrame mudar, ele vai obter um novo objeto global, porém o this global sempre terá o mesmo valor, como foi demonstrado no link da proposta.
Para poder identificar o this correto, os browsers utilizam duas variáveis: window e windowProxy. A variável window é o objeto global que muda sempre que trocamos de página, no entanto, windowProxy é o objeto que faz com que todas as chamadas para window acessem o objeto window atual. E este objeto nunca é alterado.
Casos de uso
Como variáveis globais e objetos globais são um problema e, na verdade, são até considerados erros de design que o JavaScript não pode se livrar por conta da compatibilidade com versões anteriores, não sobraram muitos casos de uso para o globalThis.
Uma vez que, cada dia mais, vamos introduzindo novas funcionalidades para facilitar não só o uso de variáveis que tem escopo definido, por exemplo, o uso de let e const define o escopo local para a variável. Também temos a alteração de que todo módulo nativo do ECMAScript tem seu próprio escopo local, portanto o que nos resta para o globalThis são poucas coisas:
- Uso de polyfills para prover novas funcionalidades para engines
- Detecção de funcionalidades de um engine específico, mais ou menos quando usamos window.fetch ou window.serviceWorker
Conclusão
Com o tempo o JavaScript se torna uma linguagem cada vez mais estabelecida e cada vez mais organizada de acordo com as definições da comunidade e as novas funcionalidades que são implementadas. Infelizmente não podemos nos desfazer de erros do passado, porém podemos nos preparar para o futuro.
Referencias:
https://2ality.com/2019/08/global-this.html
https://github.com/tc39/proposal-global
De 0 a 10, o quanto você recomendaria este artigo para um amigo?