What is globalThis? And why should we start using it

Tram Ho

Javascript is more and more popular and used in many environments. In addition to the web browser – the most commonly used environment, it is also used in servers, smartphones, machine learning programs, and even robot hardware.

Each environment has a specific object model and provides different syntax for global object access. In a web browser, the global object can be accessed through window , self or frames . In Node.js, however, these properties don’t exist. Instead, you must use global . For Web Workers, it’s self .

The different methods of referencing the global object make it difficult for us to write Javascript code that integrates in many different environments. Fortunately, there is a recommendation aimed at fixing this problem by introducing a standard property called globalThis available in all environments.

In this article, we’ll first look at global objects in popular Javascript environments and see how globalThis provides a unified mechanism for accessing it.

window

The window property is used to refer to the object of the current document in the browser environment. At the top of the code the var becomes a property of the window and can be accessed anywhere in the code.

Usually, it is not necessary to directly reference the window when using its properties because the reference reference is already implied. However, when there is a local variable with the same name as the global variable, using window is the only way:

As you can see, the window is useful for referring to global objects, no matter what extent the code is running.

Note: window actually references window.window, so window.window === window.

In addition to the standard Javascript properties and methods, the window object contains a number of additional properties and methods that allow us to control the web browser window as well as the document itself.

Self

The Web Workers API doesn’t have a window object because it doesn’t have a browsing context. Instead, it provides the WorkerGlobalScope interface WorkerGlobalScope contains data normally passed through the window .

To access the global object in Web Workers, we often use self , similar to the window property of the window object. self is a reference to the global object and can be used to make explicit, rather than implicit, references:

In a browser environment, this code will rewrite the window instead of the DedicatedWorkerGlobalScope . Because the value of self changes depending on the environment it uses, it sometimes takes precedence over the window . While self references WorkerGlobalScope.self in the Web Workers context, it references window.self in browser context.

It is important not to confuse the self attribute with common Javascript properties to declare a local variable, used to maintain a reference to a context. For example:

Frames

Another way to access the global object in a browser environment is to use the frames property, which works similarly to self and window :

This read-only property is usually used to get the list of the current window’s child frames. For example, you can use window.frames [0] or frames [0] to access the first frames.

Global

In Node.js, you can access the global object using the global keyword:

window , self or frames don’t work in the Node.js environment. Remember that the top-level scope in Node.js is not global scope. In the browser, var abc = 123 will create a global variable. However, in Node.js the variable will be local to the module itself.

This

In the browser, you can use the program keyword this to refer to the global object:

Functions inside this do not behave strictly, or arrow functions can also refer to global objects. But that’s not the case with functions running in strict mode, where this has an undefined value:

In the Node module. this at the top level does not refer to the global object. Instead, this has value with module.exports . In functions (Node environment), the value of this is determined based on how the function is invoked. In Javascript modules, this at the highest level undefined .

Introducing globalThis

globalThis appeared aimed at reinforcing increasingly fragmented ways to access global objects by specifying a standard global property. globalThis was suggested in stage 4, which means it’s ready for inclusion in standard ES2020 documentation. All popular browsers, including Chrome 71+, Firefox 65+ and Safari 12.1+, already support this feature. You can also use it in Node.js 12+.

By using globalThis , your code will work in window and non-window context without the need to write additional checks or checks. In most environments, globalThis directly refers to the global object of that environment. However, in browsers, proxies are used internally to take into account iframe and cross-window security. In practice, however, it doesn’t change the way your code is written.

In general, when you are not sure what environment your code will be used in, or when you want to make your code executable in different environments, the globalThis property globalThis in handy. However, you must use polyfill to implement this feature on older browsers that do not support this feature.

On the other hand, if you are sure what environment your code will be used for, then use one of the existing ways to reference the environment’s global object and save you the need to include the polyfill globalThis .

Create a globalThis polyfill

Prior to the launch of globalThis , a common way to access global objects across different environments was to use the following model:

The problem with this code is that the constructor and evaluation function cannot be used in web pages that enforce Content Security Policy (CSP). The Chrome extension system also does not allow such code to run due to CSP.

Another model for referring global objects is as follows:

This model is commonly used on the web. But this also has some flaws that make it unreliable in certain situations. Fortunately, Mathias Bynens at Chrome DevTools comes up with an innovative model that doesn’t fall into those shortcomings:

Polyfill is a more powerful solution than other approaches, but it’s still not perfect. Modifying Object , Object.defineProperty , or Object.prototype.__defineGetter__ can break the polyfill, as Mathias mentioned.

Summary

It is very difficult to write Javascript code that works in many environments. Each server environment has a slightly different object model. Therefore, to access the global object, you need to use different syntaxes in different Javascript environments.

With the introduction of the globalThis property, global object access becomes much simpler and it is no longer necessary to detect the environment in which the code is executing.

At first glance, globalThis may seem like an easy thing to polyfill, but in reality a lot more complicated to get it right. All of the workarounds available are not perfect, and error could arise if you are not careful.

ECMAScript is rapidly evolving and you can expect new features to be introduced more often. For the latest additions to the specifications, check out the list of completed recommendations

Source: https://blog.logrocket.com/what-is-globalthis-why-use-it/

Share the news now

Source : Viblo