JavaScript怎么准确判断数据类型？typeof、instanceof与Object.prototype.toString对比

在 JavaScript 开发中，判断变量的数据类型是一项高频基础任务。然而，由于 JavaScript 历史遗留的设计特性与复杂的原型继承体系，没有任何单一关键字能够无死角地覆盖所有判断场景。准确判断类型的核心路径可归纳为：基础原始值优先使用 typeof（排除 null）；面向对象层级与自定义类实例检测使用 instanceof；复杂内置对象及需要绝对严谨的通用检测场景，则必须依靠 Object.prototype.toString.call()。理解三者的运作机制与适用边界，是写出健壮代码的关键。

图 1：JavaScript 数据类型判断决策流程

一、typeof 运算符：基础类型的快速探测器

typeof 是 JavaScript 语言内建的一元操作符，用于返回一个表示未经求值的操作数类型的字符串。它的语法最简单，执行性能开销极低，并且在操作未声明的变量时不会抛出 ReferenceError，而是安全地返回 "undefined"。

1. 能够准确识别的类型

对于 ECMAScript 规范中定义的大多数原始类型以及函数，typeof 能够稳定给出明确结果：

• typeof "hello" === "string"
• typeof 1024 === "number"
• typeof true === "boolean"
• typeof undefined === "undefined"
• typeof Symbol("key") === "symbol"
• typeof 9007199254740991n === "bigint"
• typeof function(){} === "function"

2. typeof 的两大关键局限

尽管 typeof 在基础类型上表现稳定，但在引用类型和特定历史遗留值上存在严重局限：

• null 的误判：typeof null 的计算结果为 "object"。这是 JavaScript 历史上最著名的 bug 之一，源于初期版本在底层存储数据时的类型标签设计。
• 无法细分引用对象：无论传入的是普通对象、数组、日期、正则表达式还是集合，typeof 一律返回 "object"。例如 typeof [] 与 typeof {} 均为 "object"。

图 2：typeof 底层类型标签（Type Tag）与 null 误判机理

二、instanceof 运算符：原型链关系的探测工具

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。它的语法形式为 object instanceof Constructor。与 typeof 关注“当前值属于哪种原始标记”不同，instanceof 关注的是“对象与构造器之间的继承血缘关系”。

1. 运作原理

当执行 L instanceof R 时，JavaScript 引擎会获取 L 的原型链对象（即 Object.getPrototypeOf(L)），然后不断向上追溯，逐级与 R.prototype 进行全等比对。若在链条上找到相等的引用则返回 true；若一直寻找到原型链尽头（null）仍未找到，则返回 false。

// 手写实现模拟 instanceof 内部执行流程
function customInstanceof(left, right) {
  // 基础类型直接返回 false
  if (left === null || (typeof left !== "object" && typeof left !== "function")) {
    return false;
  }
  let proto = Object.getPrototypeOf(left);
  const targetPrototype = right.prototype;

  while (proto !== null) {
    if (proto === targetPrototype) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

图 3：instanceof 原型链查找与跨 iframe 边界失效原理

2. instanceof 的局限性总结

• 无法检测原始字面量："str" instanceof String 返回 false，因为原始字符串并非对象，没有原型链；仅有使用 new String("str") 显式实例化的对象才会返回 true。
• 原型链终点的多重匹配：因为所有普通对象最终都继承自 Object.prototype，所以 [] instanceof Object 同样返回 true，无法精确确定其具体是数组还是对象。
• 跨执行环境不兼容：如上图所示，当页面中嵌套 <iframe> 时，不同 window 上下文拥有各自独立的内置原型对象，导致 instanceof 校验失败。

三、Object.prototype.toString：全局高精度判断基准

为了绕开 typeof 的模糊判定以及 instanceof 依赖原型链和执行环境的缺陷，标准库提供了精准的底层方法：Object.prototype.toString。

1. 运作原理与 [[Class]] 机制

在 ECMAScript 规范中，每个内置对象在创建时都包含一个内部槽属性 [[Class]] 或对应的 [Symbol.toStringTag] 标识。当直接调用一个对象的 toString() 时，通常会被子类重写的方法覆盖（例如 Array.prototype.toString 会将数组转换成逗号分隔的字符串）。

然而，当我们使用 Function.prototype.call 借用 Object.prototype.toString 并将目标对象绑定为 this 时，引擎会按照规范执行：

1. 若 this 是 undefined，返回 "[object Undefined]"。
2. 若 this 是 null，返回 "[object Null]"。
3. 将其转换为包装对象，读取内部标签，最终输出格式统一的 "[object Type]" 字符串。

// 常用类型检测示例
const toString = Object.prototype.toString;

toString.call("hello");       // "[object String]"
toString.call(100);           // "[object Number]"
toString.call(true);          // "[object Boolean]"
toString.call(undefined);     // "[object Undefined]"
toString.call(null);          // "[object Null]"
toString.call([]);            // "[object Array]"
toString.call({});            // "[object Object]"
toString.call(new Date());    // "[object Date]"
toString.call(/abc/g);        // "[object RegExp]"
toString.call(new Map());     // "[object Map]"
toString.call(new Set());     // "[object Set]"
toString.call(async () => {});// "[object AsyncFunction]"
toString.call(Promise.resolve()); // "[object Promise]"

四、三种方案综合对比与选型指南

在工程实践中，开发者应根据判断目标（原始类型、内置对象还是自定义类体系）选择适配的手段。下表对这三种常用方式的各项指标进行对比：

图 4：三种类型判断方案特性与选型总结矩阵

五、工程级通用类型判断函数封装

为了兼顾执行性能与高精度要求，生产项目中通常会将上述判断逻辑进行分流封装：对非 object 的原始值利用 typeof 快速返回，其余复杂类型与 null 则走精准提取流程：

/**
 * 获取变量的精确类型名称（全小写）
 * @param {*} target - 待检测的任意值
 * @returns {string} - 如 'string', 'number', 'null', 'array', 'date', 'map' 等
 */
function getType(target) {
  // 1. 优先排除 null
  if (target === null) {
    return "null";
  }

  // 2. 对于基础原始类型与函数，typeof 速度最快且最直接
  const type = typeof target;
  if (type !== "object") {
    return type;
  }

  // 3. 针对所有引用对象，利用 Object.prototype.toString 提取具体类型
  // 匹配 "[object Type]" 中的 Type 部分并转换为小写
  return Object.prototype.toString
    .call(target)
    .replace(/^\[object\s+(\w+)\]$/, "$1")
    .toLowerCase();
}

// 测试验证
console.log(getType(123));               // "number"
console.log(getType("hello"));           // "string"
console.log(getType(null));              // "null"
console.log(getType(undefined));         // "undefined"
console.log(getType([]));                // "array"
console.log(getType({}));                // "object"
console.log(getType(new Date()));        // "date"
console.log(getType(/reg/i));            // "regexp"
console.log(getType(new Map()));         // "map"
console.log(getType(new Set()));         // "set"
console.log(getType(new Error()));       // "error"
console.log(getType(Symbol("foo")));     // "symbol"
console.log(getType(BigInt(100)));       // "bigint"

通过先使用 target === null 和 typeof 进行短路筛选，既避免了对每个简单数字或字符串执行相对耗时的对象包装与字符串正则解析，又确保了数组、日期、正则表达式及其他内置对象能够得到百分之百精确的分类。