“This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

We all know that the “this” reference in JS has always been a problem. The direction of this varies greatly in different environments, and even in different semantics and scopes.

For example, before ES6, we got this in a function that referred to the function itself, and changed the this pointer in the external scope; After ES6, we used the arrow function to avoid the problem of the function changing the point of this.

Other common methods to modify this are bind, apply, and call. For all three, the first argument is this. The function that bind returns is not executed immediately, and the second argument apply is an array. Both bind and call arguments are hashed, that is, arguments passed to the function from the second, separated by commas.

GlobalThis object

The JavaScript language has a top-level object that provides the global environment (that is, the global scope) in which all code runs. However, top-level objects are not uniform across implementations.

  • In the browser, the top-level object iswindow, but Node and Web workers do notwindow.
  • In browsers and Web workers,selfAlso points to top-level objects, but Node doesn’tself.
  • In Node, the top-level object isglobal, but no other environment supports it.

In order for the same code to be able to fetch top-level objects in any environment, it is now common to use the this keyword, but there are limitations.

  • In the global environment,thisReturns the top-level object. However, in the Node.js modulethisReturn the current module, ES6 modulethisReturns theundefined.
  • Inside the functionthisIf a function is not run as a method of an object, but simply as a function,thisIt points to the top-level object. But, in strict mode, thenthisReturns theundefined.
  • Whether it’s strict mode or normal mode,new Function('return this')()The global object is always returned. However, if the browser uses a Content Security Policy (CSP), theneval,new FunctionNone of these methods may work.

In summary, it’s hard to find a way to get to the top-level object in all cases. Here are two methods that can be used reluctantly.

Typeof window! == 'undefined' ? window : (typeof process === 'object' && typeof require === 'function' && typeof global === 'object') ? global : this); 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'); };Copy the code

ES2020 introduces globalThis as a top-level object at the level of language standards. That is, globalThis exists in any context and can be retrieved from it to point to the top-level object pointing to this in the global context.

The shim library global-This emulates this proposal and is available in all environments.

conclusion

The problems existing at the beginning of JS design will be gradually improved and repaired in the later ES standard. While enjoying the pleasure brought by the new grammar, we should also do our best to give advice and contribute to the development of this language.