如何使用 ES11 中的 globalThis 替代 window 和 self 对象

在 ECMAScript 2019 (ES11) 标准中，新增了一个全局对象 globalThis，用于解决不同环境下全局对象的命名差异问题。在前端开发中，我们经常会用到 window 或者 self 对象来访问全局变量，但是在 Web Worker 和 Node.js 等环境下，这两个对象并不可用，这时候就可以使用 globalThis 对象来替代。

globalThis 的定义

globalThis 是 ES11 中新增的全局对象，它是一个全局作用域下的属性，并且它的值是不可变的。globalThis 指向全局对象，无论在什么环境中（浏览器中的 window 对象，Node.js 中的 global 对象等）。因此，在任何环境下都可以通过 globalThis 来访问全局变量。

如何使用 globalThis 对象

使用 globalThis 替代 window 或 self 对象，只需将这两个对象的引用替换成 globalThis 即可。例如：

// 在浏览器环境中
globalThis.alert('Hello, world!');

// 在 Node.js 环境中
globalThis.process.stdout.write('Hello, world!');

示例代码

下面的例子是在实现一个简单的全局通信机制时，用到了 globalThis。

// javascriptcn.com 代码示例
// 定义一个全局通信对象
globalThis.MyApp = {};

// 在 A 页面中注册一个事件
globalThis.MyApp.eventBus = {
  events: {},
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },
  emit(event, data) {
    if (!this.events[event]) {
      return;
    }
    this.events[event].forEach(callback => callback(data));
  }
};
// 对于其他页面，可以通过 globalThis.MyApp.eventBus 对象进行事件绑定和事件触发

// 在 B 页面中注册一个事件
globalThis.MyApp.eventBus.on('message', data => {
  console.log(`收到消息：${data}`);
});

// 在 C 页面中触发一个事件
globalThis.MyApp.eventBus.emit('message', 'Hello, world!');

上面的代码通过 globalThis 对象，在不同的页面中传递数据和事件，实现了全局的通信机制。

总结

使用 globalThis 对象可以解决全局对象命名的差异问题，使得在不同环境下访问全局变量更加方便。在实际开发中，我们可以通过 globalThis 对象实现全局通信、打印日志等功能。不过，需要注意的是，不要滥用全局变量，避免产生不可预知的副作用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65364cd17d4982a6ebe50d3e