为什么从函数调用中检查 undefined 会导致 SSR 错误，而不是在 react 中直接使用 `typeof`？

Question

任何人都可以帮助解释这种意外行为吗？

我有一个来自https://typeofnan.dev/using-session-storage-in-react-with-hooks/ 的可用useSessionStorage钩子，如下所示：

import { useState, useEffect } from 'react';

function getSessionStorageOrDefault(key, defaultValue) {
  if (typeof sessionStorage === 'undefined') {
    return defaultValue;
  }
  const stored = sessionStorage.getItem(key);
  if (!stored) {
    return defaultValue;
  }
  return JSON.parse(stored);
}

function useSessionStorage(key, defaultValue) {
  const [value, setValue] = useState(
    getSessionStorageOrDefault(key, defaultValue)
  );

  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useSessionStorage;

请注意我如何检查以确保sessionStorage已定义以确保它在 SSR 中工作：

  if (typeof sessionStorage === 'undefined') {
    return defaultValue;
  }

现在，当我尝试将typeof sessionStorage === 'undefined'替换为对名为isUndefined的实用程序方法的调用isUndefined ，我收到 SSR 错误，即sessionStorage is not defined 。

这是isUndefined实用程序方法

export function isUndefined(value) {
  return typeof value === 'undefined';
}

这是调用isUndefined并且 SSR 不再起作用的修改后的useSessionStorage钩子：

import { useState, useEffect } from 'react';
import { isUndefined } from 'utils/lang';

function getSessionStorageOrDefault(key, defaultValue) {
  if (isUndefined(sessionStorage)) {
    return defaultValue;
  }
  const stored = sessionStorage.getItem(key);
  if (!stored) {
    return defaultValue;
  }
  return JSON.parse(stored);
}

function useSessionStorage(key, defaultValue) {
  const [value, setValue] = useState(
    getSessionStorageOrDefault(key, defaultValue)
  );

  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useSessionStorage;

为什么typeof sessionStorage === 'undefined'工作，但用isUndefined(sessionStorage)替换它会导致它不再工作？

Answer 1

这只是因为 JavaScript 和所有我能想到的所有编程语言的基本事实。 当您调用isUndefined(sessionStorage) ，您正在尝试将名为sessionStorage的标识符标识的内存位置按值传递给函数isUndefined 。 为此，需要查找sessionStorage标识符并读取其值，这当然是不可能的，因为它尚未声明，因此会出现错误。

另一方面， typeof是一个operator 。 您没有将sessionStorage的值传递给它，而是要求它查找该标识符的类型。 碰巧typeof在传递未声明的标识符时的行为是返回'undefined'而不是抛出错误。

最后，值得注意的是，javascript 中已声明但尚未定义的变量的默认值为undefined ，因此您可以将其传递给函数。

希望以下内容很清楚：

function isUndefined(identifier) {
  return typeof identifier === "undefined"
}

let x = true
let y

isUndefined(x) // false
isUndefined(y) // true
isUndefined(z) // Uncaught ReferenceError: z is not defined

如果消息是“z 尚未声明”可能会更清楚，但希望您现在明白它真正告诉您的是什么。