使用 ES11 中的 globalThis 避免不同环境下 “this” 的问题
在前端开发中，我们经常会遇到 this 的问题。在不同的环境下，this 的指向不同，导致代码无法正常运行。而 ES11 中的 globalThis 提供了一种简单而有效的解决方案，可以避免这种问题的发生。
globalThis 的介绍
globalThis 是 ES11 中新增的一个全局属性，用于获取全局对象（即 window 或 global）。它是一个非常重要的属性，可以帮助我们避免代码在不同环境下 this 的指向不同的问题。
在浏览器中，globalThis 指向 window 对象；在 Node.js 中，globalThis 指向 global 对象。使用 globalThis 可以使我们的代码在不同环境下都能正常运行。
globalThis 的应用示例
下面是一个简单的示例，在该示例中，我们使用 globalThis 替代了 this，以避免不同环境下的问题。
function foo() {
console.log(globalThis === this);
}
foo(); // true在这个示例中，我们使用 globalThis 比较它和 this 是否相等。不管我们在什么环境下运行这个代码，它都将输出 true。
另一个用例是如何在浏览器和 Node.js 中使用 fetch。由于浏览器和 Node.js 中的全局对象不同，我们需要分别在代码中编写不同的 fetch 调用。但是，如果我们使用 globalThis，我们可以编写一份代码，在不同的环境下都可以正常工作。
-- -------------------- ---- ------- ----- --- - --------------------------------------------- ----- -------- --------- - ----- -------- - ----- ---------------------- ----- ------ - ----- ---------------- -------------------- - ----------
在这个示例中，我们使用 globalThis.fetch 调用 fetch，这样代码就可以在浏览器和 Node.js 中同时工作。
总结
使用 ES11 中的 globalThis 可以避免不同环境下 this 的问题。它是一个非常有用的属性，可以帮助我们编写能在各种环境下正常工作的代码。在编写前端代码时，我们应该尽可能使用 globalThis，以避免 this 的指向问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450e465980a9b385b9c4e58