怎么准确判断JavaScript变量的数据类型

一、JavaScript 的类型系统与判断难点

ECMAScript 规范定义了 8 种内置数据类型，分为两大类：

• 7 种原始类型（Primitive Types）：Undefined、Null、Boolean、Number、BigInt、String、Symbol。
• 1 种引用类型（Reference Type）：Object。函数、数组、日期（Date）、正则表达式（RegExp）、Map、Set 等在底层均派生自 Object。

在实际编码中，类型判断之所以频频踩坑，主要源于以下三个核心难点：

1. 历史遗留缺陷：typeof null 会返回 "object"。这是初代 JavaScript 引擎内部使用 32 位单元存储变量时的设计漏洞，对象标签为 0，而空指针正好为全 0，导致判断失真。
2. 引用类型无法进一步细分：使用 typeof 检查普通对象、数组、正则表达式或日期实例，结果一律是 "object"。
3. 跨执行上下文原型隔离：在包含 iframe 或独立 Worker 窗口的应用中，不同上下文拥有各自全局的 Array 和 Object 构造函数。因此，一个窗口内的数组传到另一个窗口时，instanceof Array 将判定失败。

二、基础判断方式的局限与适用边界

1. typeof 操作符

typeof 是 JavaScript 语言自带的单目运算符，专门用于检查原始类型及函数。对于未声明的变量，typeof 不会抛出 ReferenceError，这是它独特的一项安全特性。

typeof "hello"       // "string"
typeof 1024          // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof Symbol()      // "symbol"
typeof 100n          // "bigint"
typeof function(){}  // "function"

2. instanceof 操作符与原型链陷阱

instanceof 运算符用于检测构造函数的 prototype 属性是否存在于某实例对象的原型链上。它的语法为 object instanceof Constructor。

instanceof 能胜任自定义类实例的类型识别，但它有两个致命局限：

• 对原始字面量完全无效："text" instanceof String 返回 false，因为字面量不是通过构造函数包装出来的对象实例。
• 跨 Realm（执行上下文）失效：当网页引入 iframe 时，子页面的全局环境与父页面相互独立，拥有各自独立的 Array.prototype 内存地址。

3. constructor 属性

通过访问 value.constructor === Array 也能判断类型，但此方法极不稳定：

• 对 null 或 undefined 访问其属性会直接抛出运行期异常；
• 原型被覆盖（例如 Person.prototype = {}）时，constructor 指向会被篡改或指向 Object。

三、通用精确方案：Object.prototype.toString.call(value)

在 ECMAScript 规范中，Object.prototype.toString() 的行为经过专门设计。当调用该方法时，引擎会执行如下抽象操作：

1. 如果值为 undefined，直接返回 "[object Undefined]"；
2. 如果值为 null，直接返回 "[object Null]"；
3. 令 O 为传入变量通过 ToObject(value) 转换后的对象；
4. 若 O 具有 Symbol.toStringTag 属性且值为字符串，则将其作为标签；
5. 否则，获取内置对象的内部槽属性 [[Class]]（如 "Array"、"Date"、"RegExp"、"Map"、"Set" 等）；
6. 拼接返回格式为 "[object " + tag + "]" 的字符串。

因为几乎所有派生类（Array, Date, RegExp）都在自身原型上重写了 toString 方法，直接调用 value.toString() 会执行被覆写的方法，因此必须借助 Function.prototype.call 强制让根原型的 toString 在目标变量上执行。

四、特定场景下的精准判断方法

1. 数组类型：优先使用 Array.isArray()

ECMAScript 5 引入了原生的 Array.isArray()。它不需要开发者手动写复杂的 toString.call，底层直接读取对象的内部特权槽，能够完美穿透多个 iframe。在任何现代浏览器与 Node.js 环境中，判断数组应无条件首选 Array.isArray()。

Array.isArray([1, 2, 3]);                  // true
Array.isArray(iframeWindow.someArray);     // true（即便跨 Realm 依然可靠）
Array.isArray({ length: 0 });              // false（类数组对象不被误判）

2. 纯对象（Plain Object）的严格判定

工程中常需要判断一个变量是否为字面量对象 {} 或通过 Object.create(null) 创建的纯粹键值对容器（区别于 Date 或类实例）。判断逻辑如下：

function isPlainObject(val) {
  if (Object.prototype.toString.call(val) !== "[object Object]") {
    return false;
  }
  const proto = Object.getPrototypeOf(val);
  return proto === null || proto === Object.prototype;
}

3. 数字与 NaN 的边界排查

NaN 在 JavaScript 中的类型也是 number，但它代表非法数值。准确判断一个变量是有效数值应当排除 NaN：

function isValidNumber(val) {
  return typeof val === "number" && !Number.isNaN(val);
}

五、全场景类型判断决策流程与通用封装

为了在工程中以最小的性能开销兼顾绝对的准确性，可以采用阶梯决策树策略：

1. 快速路径（Fast Path）：对于 null 和 undefined 直接以全等比对；其余非 object 类型的变量直接通过 typeof 捕获。
2. 特权路径：数组直接由 Array.isArray() 快速拦截。
3. 深层路径：对于剩余所有复合对象，统一走 Object.prototype.toString.call() 解析。

根据上述决策树，可封装出如下高可用、高性能的通用类型判断工具：

/**
 * 准确获取任意 JavaScript 变量的真实类型字符串
 * @param {*} value 待检测的变量
 * @returns {string} 小写的类型名称，例如 'string', 'number', 'array', 'null', 'date', 'regexp' 等
 */
function getType(value) {
  // 1. 优先处理 null 陷阱
  if (value === null) {
    return 'null';
  }

  // 2. 基础原始类型与函数直接使用 typeof 快速提取
  const rawType = typeof value;
  if (rawType !== 'object') {
    return rawType;
  }

  // 3. 数组类型使用原生 Array.isArray 进行最高效、免疫跨 Realm 的拦截
  if (Array.isArray(value)) {
    return 'array';
  }

  // 4. 其余复合引用对象调用根原型 toString 准确提取 Tag
  return Object.prototype.toString
    .call(value)
    .slice(8, -1)
    .toLowerCase();
}

针对常见高频场景，可配套以下轻量谓词辅助函数：

const isObject = (val) => val !== null && typeof val === 'object';
const isFunction = (val) => typeof val === 'function';
const isNumber = (val) => typeof val === 'number' && !Number.isNaN(val);
const isString = (val) => typeof val === 'string';
const isBoolean = (val) => typeof val === 'boolean';

六、工程落地与选型总结

在日常业务开发与类库封装中，选型建议遵循以下实用原则：

1. 原始类型优先用 typeof：执行速度最快，语法最简练，但时刻牢记 typeof null === "object"。
2. 数组无条件使用 Array.isArray()：原生特权优化，跨 iframe、跨窗口绝对稳定。
3. 自定义类的关系断言使用 instanceof：适合用于面向对象继承层级的校验，但不要用于原始类型和跨窗口数据校验。
4. 深层复合对象使用 Object.prototype.toString.call()：当需要准确区分 Date、RegExp、Map、Set、Error 或普通对象时，作为最值得信赖的通用手段。