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

一、typeof 运算符：基础类型的快速探针与固有陷阱

typeof 是 JavaScript 最原生、最直观的操作符，用于返回一个表示未经计算的操作数类型的字符串。它最大的优势是语法极简、执行效率极高，并且在检测未声明变量时具备天然的安全性。

在 ECMAScript 规范中，typeof 可以准确识别出绝大多数原始类型（Primitive Types）以及函数对象：

// 1. 常见原始类型的正常识别
typeof "hello";       // 示例输出: 'string'
typeof 42;            // 示例输出: 'number'
typeof true;          // 示例输出: 'boolean'
typeof undefined;     // 示例输出: 'undefined'
typeof Symbol("id");  // 示例输出: 'symbol'
typeof 100n;          // 示例输出: 'bigint'
typeof function() {}; // 示例输出: 'function'

// 2. 安全检测未声明变量（不会抛出 ReferenceError）
typeof nonExistentVar; // 示例输出: 'undefined'

尽管 typeof 适合快速筛选原始值，但它存在两个必须防范的历史与设计缺陷：

1. 著名的 typeof null === 'object' 缺陷：在 JavaScript 最初的实现版本中，所有值的底层表示均由一个类型标签（Type Tag）与实际数据单元组合构成。当时对象的类型标签占用低位的二进制 000，而空指针 null 在 32 位系统内存中恰好全由 0 填充，导致它的类型标签直接被判定为了 000，从而错误返回 'object'。由于大量历史网页依赖这一行为，该 Bug 被永久保留下来。
2. 引用类型无法进一步细分：除函数外，所有的引用类型（普通对象、数组 []、正则表达式 /pattern/、日期 new Date() 以及包装对象等）均统一返回 'object'，完全无法辨别其真实构造。
3. 暂时性死区（TDZ）报错：使用 let 或 const 声明的变量在进入作用域至声明语句执行前处于暂时性死区，此时在其前面执行 typeof variable 会直接抛出 ReferenceError，并非安全的 'undefined'。

二、instanceof 运算符：原型链追溯与其边界限制

当变量已经被确定为对象类型，需要进一步探知其所属的构造函数或类体系时，instanceof 派上了用场。instanceof 并不直接比对值的字面类型，而是沿着对象的原型链（Prototype Chain）逐级向上递归查找，判断指定构造函数的 prototype 属性是否存在于该原型链中。

其核心查找逻辑可以抽象为：若 L.__proto__ === R.prototype 成立则返回 true；若不相等，则令 L = L.__proto__ 再次向上比对，直到到达原型链终点 Object.prototype.__proto__（即 null）时返回 false。

// 1. 数组与继承类的检测
const list = [1, 2, 3];
list instanceof Array;  // 示例输出: true (list.__proto__ === Array.prototype)
list instanceof Object; // 示例输出: true (沿着原型链找到 Object.prototype)

// 2. 自定义类的层级追溯
class Animal {}
class Dog extends Animal {}
const pet = new Dog();

pet instanceof Dog;    // 示例输出: true
pet instanceof Animal; // 示例输出: true

然而，基于原型链的检测机制在实际生产中存在三大显著限制：

1. 无法判断原始类型字面量：字面量形式创建的原始值并非对象实例，不会挂载原型链。例如 "abc" instanceof String 和 123 instanceof Number 均严格返回 false；只有通过包装对象构造的 new String("abc") instanceof String 才会返回 true。
2. 多执行环境（Realm / iframe）的原型链隔离问题：在包含 <iframe>、弹窗或 Web Worker 的跨全局环境应用中，每个全局环境都拥有独立的 window 与内置构造函数副本。从 iframe 内部传递过来的数组，其原型属于 iframe.contentWindow.Array.prototype，而当前宿主环境比对的是 window.Array.prototype。两者虽然同名，但占用完全不同的内存地址，导致 iframeArray instanceof Array 恒为 false。
3. 原型链被篡改或无原型对象：使用 Object.create(null) 创建的纯净字典对象没有原型链（obj.__proto__ === undefined），执行 obj instanceof Object 会返回 false。此外，若运行时通过 Object.setPrototypeOf() 动态变更了原型，判定结果也将随之突变。

三、Object.prototype.toString：最精准通用的终极解法

在 ECMAScript 规范中，Object.prototype.toString() 被定义为获取对象内部特征的标准方法。当它被调用时，规范规定引擎会按以下严格步骤执行：

1. 若参数值为 undefined，直接返回 "[object Undefined]"。
2. 若参数值为 null，直接返回 "[object Null]"。
3. 对原始类型执行 ToObject(value) 进行隐式装箱（例如将 "abc" 转换为临时 String 包装对象）。
4. 检查目标对象自身或其原型链上是否存在 Symbol.toStringTag 属性：
   • 若存在且其值为字符串，则取该字符串作为自定义标签 tag。
   • 若不存在，则读取引擎规范预设的内部插槽 [[Class]]（在现代规范中对应为默认内置 tag，如 "Array", "Date", "RegExp", "Map", "Set" 等）。
5. 拼接并返回规范格式字符串："[object " + tag + "]"。

关键提问：为什么必须写成 Object.prototype.toString.call(value)？
这是因为 Array、Function、Date 以及许多原生类都在各自的原型上重写（Override）了 toString 方法。例如直接对数组执行 [1, 2].toString() 返回的是元素逗号分隔字符串 "1,2"，而非类型标签。因此，必须使用 .call() 或 .apply() 强制将 Object.prototype 上的根方法绑定到待检测对象上执行。

// 1. 跨环境精准识别各类内置类型与边界值
const toString = Object.prototype.toString;

toString.call("hello");      // 示例输出: '[object String]'
toString.call(100);          // 示例输出: '[object Number]'
toString.call(null);         // 示例输出: '[object Null]' (完美避开 typeof null 缺陷)
toString.call(undefined);    // 示例输出: '[object Undefined]'
toString.call([1, 2, 3]);    // 示例输出: '[object Array]' (iframe 内数组同样准确)
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(Math);         // 示例输出: '[object Math]'

// 2. ES6 Symbol.toStringTag 对输出结果的定制
class CustomQueue {
    get [Symbol.toStringTag]() {
        return "CustomQueue";
    }
}
const queue = new CustomQueue();
toString.call(queue);        // 示例输出: '[object CustomQueue]'

四、横向对比与通用类型判断工具封装

理解了上述三种机制各自的底层特性与边界条件后，我们在技术选型时就可以做到目标清晰、取长补短。下表系统归纳了常见数据在三种方式下的返回值与判断能力：

实用通用的 getType 类型提取函数实现

基于上述原理，我们可以封装一个既能精准识别所有内置与原始类型，又符合小写命名习惯的通用工具函数 getType，用于替代零散的判断语句：

/**
 * 获取变量的精确数据类型名称（统一返回全小写字符串）
 * @param {*} value - 任意待检测的数据
 * @returns {string} - 如 'string', 'number', 'array', 'null', 'date', 'map' 等
 */
function getType(value) {
    // 1. 优先处理全等情况（性能极高且避免规范装箱）
    if (value === null) return "null";
    if (value === undefined) return "undefined";

    // 2. 对原始基础类型及函数，直接使用 typeof 快速返回
    const rawType = typeof value;
    if (rawType !== "object") {
        // 特殊数字 NaN 的额外修正：typeof NaN === 'number'，如需隔离可在此处理
        if (rawType === "number" && Number.isNaN(value)) {
            return "nan";
        }
        return rawType;
    }

    // 3. 对于引用对象，调用 Object.prototype.toString 并截取核心标签
    // 输出形如 "[object Array]" -> 截取为 "array"
    return Object.prototype.toString
        .call(value)
        .slice(8, -1)
        .toLowerCase();
}

// 示例验证：
console.log(getType("Antigravity")); // 示例输出: 'string'
console.log(getType(2026));          // 示例输出: 'number'
console.log(getType(NaN));           // 示例输出: 'nan'
console.log(getType(null));          // 示例输出: 'null'
console.log(getType([1, 2, 3]));     // 示例输出: 'array'
console.log(getType(new Date()));    // 示例输出: 'date'
console.log(getType(new Map()));     // 示例输出: 'map'
console.log(getType({ a: 1 }));      // 示例输出: 'object'

如何准确判断纯对象（Plain Object）

在日常业务开发（如状态管理、深拷贝或参数校验）中，我们通常需要判断一个值是否为字面量对象 {} 或 Object.create(null)，即所谓的“纯对象”（Plain Object），而排除掉由自定义类实例化的对象或带复杂原型链的对象。此时可以结合 Object.getPrototypeOf() 进一步收敛判断：

/**
 * 判断一个值是否为纯对象（由 {} 或 Object.create(null) 创建）
 * @param {*} value
 * @returns {boolean}
 */
function isPlainObject(value) {
    if (getType(value) !== "object") return false;

    const proto = Object.getPrototypeOf(value);
    // Object.create(null) 的 proto 为 null
    if (proto === null) return true;

    // 普通字面量对象的原型直接等于 Object.prototype
    return proto === Object.prototype;
}

// 示例验证：
isPlainObject({});                   // 示例输出: true
isPlainObject(Object.create(null));  // 示例输出: true
isPlainObject(new Date());          // 示例输出: false
isPlainObject(new (class A {})());   // 示例输出: false

五、总结与编码规范建议

准确判断 JavaScript 数据类型的核心不在于死记硬背某一条语法，而在于理解每种操作符在规范中所处的检查层级：

• 原始值筛选：使用 typeof 快速探测 string、number、boolean、symbol、bigint 和 function。遇到 null 或 undefined 时，直接用全等操作符 ===。
• 数组判定：在现代代码中无条件优先采用 Array.isArray()，它原生具备穿越多 iframe 和跨 Realm 的可靠性。
• 实例与继承关系：使用 instanceof 判断自定义类体系（如 pet instanceof Dog），但必须注意不能用其判断基本类型字面量，且在微前端或跨窗体通信时警惕原型引用失效。
• 通用内置对象识别：使用 Object.prototype.toString.call(value)。它是当前 JavaScript 体系中最稳健、覆盖最全面的底层机制，特别适合用于公共基础库与通用工具函数的编写。