ES11中的globalThis和可选链

globalThis: 一种标准方式来获取全局对象

在JavaScript中，全局对象在不同的环境下会有不同的表现形式。在浏览器中，它是window对象；在Node.js中，它是global对象；而在Web Workers中，它是self对象。在ES11之前，获取全局对象的标准方法是使用window、global或self，这取决于所处的环境。然而，这可能会导致代码难以维护和理解，尤其是在需要在多种环境中运行的应用程序中。

globalThis的引入提供了一个标准的方式来获取全局对象，无论运行环境如何。这简化了代码并提高了可移植性。在ES11中，可以使用globalThis来访问全局对象。例如：

console.log(globalThis); // 输出：Window {window: Window, self: Window, document: Document, name: "", location: Location, ...}

可选链: 一种更安全地访问对象的属性和方法的方式

在JavaScript中，当访问对象的属性或方法时，如果对象本身不存在或为null，就会抛出一个错误。这在某些情况下可能会导致代码中断或难以调试。可选链运算符（?.）的引入提供了一种更安全地访问对象的属性和方法的方式，而不会抛出错误。

可选链运算符允许您访问对象的属性或方法，即使对象本身不存在或为null。如果对象存在并属性或方法存在，则可选链运算符将返回该属性或方法的值。否则，它将返回undefined，而不会抛出错误。例如：

const user = {
  name: "John",
  age: 30
};

console.log(user.name); // 输出：John
console.log(user.address?.city); // 输出：undefined

在上面的示例中，user对象存在且具有name属性，因此user.name返回"John"。然而，user对象不具有address属性，因此user.address?.city返回undefined，而不会抛出错误。

示例：使用globalThis和可选链来简化代码

让我们考虑一个实际的例子，演示如何使用globalThis和可选链来简化代码。假设我们有一个函数，该函数在不同的环境中获取并打印全局对象。

// 获取全局对象并打印其名称
function printGlobalObjectName() {
  if (typeof window !== "undefined") {
    console.log(window.name);
  } else if (typeof global !== "undefined") {
    console.log(global.name);
  } else if (typeof self !== "undefined") {
    console.log(self.name);
  } else {
    console.log("Global object not found");
  }
}

这段代码在不同的环境中都能正常工作，但它很长且难以维护。使用globalThis，我们可以将代码简化为：

// 获取全局对象并打印其名称
function printGlobalObjectName() {
  console.log(globalThis.name);
}

这段代码更加简洁，并且在任何环境中都能正常工作。

同样，假设我们有一个对象，该对象可能具有address属性，也可能不具有address属性。如果我们使用传统的方式来访问address属性，可能会导致代码抛出错误。使用可选链运算符，我们可以将代码简化为：

const user = {
  name: "John",
  age: 30
};

console.log(user.address?.city); // 输出：undefined

这段代码不会抛出错误，因为它使用可选链运算符来安全地访问address属性。

结论

ES11中引入的globalThis和可选链特性为JavaScript开发人员提供了更简单、更安全的方式来编写代码。globalThis提供了一种标准的方式来获取全局对象，而可选链运算符允许您安全地访问对象的属性和方法，而不会抛出错误。这些特性提高了代码的可维护性和可移植性，并使开发过程更加高效。