JavaScript：理解 void 0 in ??运算符 polyfill [重复]

Question

我很好奇 null 合并运算符 ?? 在默认 create-react-app 设置中是否有一个 polyfill。事实证明确实如此：

const App = () => {
    const foo = 'custom value';

    return (
        <div>
            {foo ?? 'default value'}
        </div>
    );
};

变成：

const App = () => {
  const foo = 'custom value';
  return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("div", {
    children: foo !== null && foo !== void 0 ? foo : 'default value'
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 7,
    columnNumber: 9
  }, undefined);
};

最有趣的部分是foo !== null && foo !== void 0 ? foo : 'default value'，它是?? 操作符的polyfill。虽然foo !== null 很明显，但我不太明白foo !== void 0 部分。什么意思？

我查了一下，void 0 === undefined 是true，但为什么不是简单的foo !== undefined？

Answer 1

void 0 与undefined 相同，大部分时间。使用void 0 有两个好处：

• 它更短（这对缩小器很有用）

• 标识符undefined不在顶层时可以创建，导致意外行为：

(() => {
  const undefined = 'foo';

  // later in the code:

  const actuallyUndef = (() => {})();
  console.log(actuallyUndef === undefined);
})();

这是一个非常病态的案例，但使用void 0 会更安全一点。

古代浏览器过去也允许在顶层创建undefined，但幸运的是不再允许。