Desenvolvimento

22 ago, 2019

ESNext – GlobalThis e tudo que você precisa saber sobre ele

Publicidade

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