4

Estava olhando um exemplo de código e me deparei com um exemplo que tinha globalThis:

// timeout de 1s
globalThis.setTimeout(() => alert('Olá'), 1000);

O setTimeout sem segredos, mas não tinha visto ainda esse objeto globalThis, apenas o setTimeout sozinho ou assim: window.setTimeout.

O que é esse objeto globalThis?

4
  • 1
    Relacionado, mas vale um resposta completa Commented 18/02/2021 às 0:56
  • 1
    humm interessante @CmteCardeal, pelo nome sugere algo como um this "global", mas ele está substituindo o window, pelo que vi na pergunta é algo como alias, mas "multiplataforma", seria isso? Commented 18/02/2021 às 1:00
  • Exato. Ele faz um resolver do objeto global de acordo com a plataforma de execucao do codigo JS. Commented 18/02/2021 às 1:02
  • 1
    legal, posta uma resposta com isso pra documentar melhor :) Commented 18/02/2021 às 1:03

1 Resposta 1

7

Intro

O objeto global é considerado um problema que o JavaScript não consegue se livrar devido a retrocompatibilidade. Todo desenvolvedor sabe a dor de cabeça que é tentar criar/modificar/remover alguma funcionalidade do JavaScript sem quebrar nenhum código que faz o uso desta funcionalidade. Além disso, o objeto global afeta negativamente a resposta como demonstrado nesta minha resposta, pelo menos nos navegadores.

O ECMAScript implementou alguns recursos para evitarmos mais facilmente o uso não intencional do objeto global. const e let, por exemplo, não criam propriedades no objeto global. Além de no Node.js, cada módulo (arquivo de script) tem seu próprio escopo para evitar afetar o global do Node.js. Pense no escopo que todo o código do módulo (arquivo) está dentro de uma função.

História

Historicamente, acessar o objeto global com JavaScript requer uma sintaxe diferente de acordo com o ambiente de execução do código JavaScript.

  • Nos browsers, podemos acessar o objeto global usando window, self ou frames

console.log(window);
console.log(self);
console.log(frames);

Inclusive se fizermos uma comparação, podemos ver que window e frames tem o mesmo ponteiro na memória:

console.log(window === frames); // true

self só funciona no contexto de Web Workers.

  • No Node.js, nenhuma das formas acima funciona. Você deveria usar o global:
$ node
Welcome to Node.js v14.15.0.
Type ".help" for more information.
> console.log(global)
// imprime:
// <ref *1> Object [global] {
//   global: [Circular *1],
//   clearInterval: [Function: clearInterval],
//   clearTimeout: [Function: clearTimeout],
//   setInterval: [Function: setInterval],
//   setTimeout: [Function: setTimeout] {
//     [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
//   },
//   queueMicrotask: [Function: queueMicrotask],
//   clearImmediate: [Function: clearImmediate],
//   setImmediate: [Function: setImmediate] {
//     [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
//   }
// }
// undefined
// >

É possível acessar o objeto global através do this em uma função sem uso do 'use strict', mas sabemos os problemas que isso pode gerar.

(function() {
  console.log(this); // => Window {...}
})();

(() => {
  console.log(this); // => Window {...}
})();

(function() {
  'use strict';
  console.log(this); // => undefined
})();

Antes da introdução do globalThis, tínhamos duas maneiras de se retornar o objeto global:

  1. Uso do Function('return this')():

console.log(Function('return this')());

Mas essa forma não era a mais adequada, pois gerava problemas de Content Security Policy.

  1. Uso de uma função personalizada. Vamos fazer um exemplo em que queremos saber se o setTimeout, por exemplo, está presente no ambiente de execução. Fazendo um if, temos o código:
var getGlobal = function() {
  if (typeof self !== 'undefined') {
    return self;
  }
  if (typeof window !== 'undefined') {
    return window;
  }
  if (typeof global !== 'undefined') {
    return global;
  }
  throw new Error('unable to locate global object');
};

var globals = getGlobal();

if (typeof globals.setTimeout !== 'function') {
  // setTimeout não está presente nesse ambiente
}

Convenhamos que é muito código para se fazer uma coisa simples.

Atualmente

Com a introdução do globalThis, ele fica responsável por fazer um resolver do contexto do ambiente de execução do código JavaScript e retornar o objeto global correspondente ao ambiente de execução. O uso das funções mencionadas em 1 e 2 já não são mais necessárias e o código ficaria bem mais simples:

if (typeof globalThis.setTimeout !== 'function') {
  // setTimeout não está presente nesse ambiente
}

Utilidade

Onde o uso do globalThis seria bem vindo:

  • Detecção de recursos para descobrir quais deles um contexto de execução JavaScript suporta;

  • Polyfills que fornecem novos recursos em mecanismos JavaScript.

Por exemplo, um polyfill pode ser usado para imitar a funcionalidade de um elemento HTML Canvas no Microsoft Internet Explorer 7, usando um plugin Silverlight, ou imitar o suporte para unidades rem CSS ou text-shadow; ou o que você quiser.

  • Nunca implementei este exemplo, mas funcionou. Vamos supor que você queira criar uma função digaOla e você quer poder usá-la em todos os ambientes que você rode código JavaScript. Você possui uma mesma aplicação adaptada para funcionar no browser, nos dispositivos móveis, no desktop, em IoT (por que não?) e a alma da aplicação está no seu servidor Node.js. Como reaproveitar a mesma função digaOla em todo o contexto de execução em cada plataforma? Usando o globalThis e não se preocupando em escrever códigos gigantescos para suportar diferentes contextos, em fazer verificações e testes.

Usando no browser:

if (!globalThis.digaOla) {
  console.log('Posso criar minha função!');

  globalThis.digaOla = function () {
    return 'Olá :)';
  };
} else {
  console.log('Não posso criar minha função!');
}

console.log('Dizendo olá: ', globalThis.digaOla());

Como poderia ser reaproveitado e usado no Node.js:

Arquivos:

  |  
   \_ test.js
  |
   \_ test2.js

test2.js:

module.exports = {
  test: () => {
    console.log('De dentro do arquivo test_copy.js: ', globalThis.digaOla());
  }
};

test.js:

if (!globalThis.digaOla) {
  console.log('Posso criar minha função!');

  globalThis.digaOla = function () {
    return 'Olá :)';
  };
} else {
  console.log('Não posso criar minha função!');
}

console.log('Dizendo olá: ', globalThis.digaOla());

const { test } = require('./test2');

test();

Executando node test.js:

$ node test.js
Posso criar minha função!
Dizendo olá:  Olá :)
Dizendo olá de dentro do arquivo test_copy.js:  Olá :)

Links:

1
  • 1
    E o melhor do globalThis é o polyfill, que coisa linda! #sqn Commented 18/02/2021 às 17:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .