🛑停止使用 `this`，而应使用 `globalThis` 来表示全局变量

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我们都知道，thisJavaScript 是一个让人头疼的领域。如果我们不仅考虑 JavaScript 本身，还要考虑代码运行的环境，情况就变得更加复杂了。

所以作为开发者，你需要了解当前的全局对象是什么？

根据代码运行环境的不同，它是一个不同的对象。

你的JavaScript代码通常在哪些环境下运行？

例如 Firefox、Chrome、Edge 或 Opera 等浏览器。这里的全局对象是 ` window.`。在浏览器中写入window.setTimeout()和setTimeout写入是相同的。但这并非在所有情况下都有效。您也有 `.`frames对象，但大多数情况下，该frames对象与 `.` 对象相同window。

NodeJS 不知道如何操作。在 Node 中，例如，window你需要使用 `$( function_name)` 来添加一个全局函数。另一个区别是，NodeJS 变量的作用域是模块级的，而不是全局对象级的。例如，如果使用 `$(function_name)` 并检查它是否等于全局变量，则会返回 false。为了更清楚地说明这一点，这里有一个例子：globalvar a = 10

// Browser Enviourment
var a = 10;
a === window.a // true
// NodeJS Enviourment
var a = 10;
a === global.a // false

由于 Deno 的设计遵循 Web 标准，因此它可以访问window对象。

然后，当你使用 Web Workers 时self，你可能无法访问this或window等等。

我觉得现在问题应该很清楚了。
编写通用的 JavaScript 代码相当困难。

我们当然可以像这样使用 polyfill：

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(); 

问题在于你必须记住使用该globals变量，并且需要以某种方式全局导入或设置它。

这就是它globalThis被引入到 Javascript 中的原因。

现在就可以使用，除了IE11之外，所有主流浏览器都支持它。但我们真的需要关心一个7年前的浏览器吗？这取决于你的项目需求。

那么该如何使用呢globalThis？其实非常简单：

// Browser
console.log(globalThis) // returns the window object
// NodeJS
console.log(globalThis) // returns the globals object
// WebWorkers
console.log(globalThis) // returns the global web workers context

很简单吧？所以现在你不用再担心这个问题了，可以安心地开始写代码了。

有一点和以前一样，alert()那就是浏览器特有的功能仍然无法使用。

资源

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
• https://exploringjs.com/impatient-js/ch_variables-assignment.html#globalThis
• https://caniuse.com/#search=globalthis

👋打个招呼！ Instagram | Twitter | LinkedIn | Medium | Twitch |