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:
- 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.
- 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:
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:
window
, pelo que vi na pergunta é algo como alias, mas "multiplataforma", seria isso?