JS判断数据类型的四种常用方法及优缺点

图 0：JavaScript 四种数据类型判断核心机制概览

方法一：typeof 运算符

typeof 是 JavaScript 中唯一的内置一元类型操作符。在变量前使用 typeof value，即可同步返回一个表示该值类型的全小写字符串。

1. 使用示例

// 原始数据类型检测
console.log(typeof 42);                // "number"
console.log(typeof "hello");           // "string"
console.log(typeof true);              // "boolean"
console.log(typeof undefined);         // "undefined"
console.log(typeof Symbol("key"));     // "symbol"
console.log(typeof 10n);               // "bigint"

// 函数检测
console.log(typeof function () {});    // "function"

// 引用类型与特殊值
console.log(typeof {});                // "object"
console.log(typeof []);                // "object"（无法识别为数组）
console.log(typeof new Date());        // "object"
console.log(typeof /abc/);             // "object"
console.log(typeof null);              // "object"（经典历史缺陷）
console.log(typeof unDeclaredVar);     // "undefined"（未声明变量安全检测）

2. 底层原理与图解

JavaScript 早期的底层实现中，变量的值以 32 位机器字单元存储，其中的低位 1 到 3 位用作类型标记（Type Tag）：

• 000：对象（Object）
• 1：整型数字（31位带符号整数）
• 010：双精度浮点数（Double）
• 100：字符串（String）
• 110：布尔值（Boolean）

特殊值 null 在机器字中存储为空指针（全 0，即 0x00）。typeof 在执行时仅检测低 3 位标记，由于全 0 的低位同样匹配 000，因此错误地将 null 归类为 "object"。该历史 Bug 为了保持 Web 生态向后兼容，已被正式保留在 ECMAScript 规范中。

图 1：typeof 的类型标记位检测逻辑与 null 历史缺陷解析

3. 优缺点分析

方法二：instanceof 运算符

instanceof 操作符用于检测构造函数的 prototype 属性是否存在于某个待检测对象的原型链上。语法形式为 object instanceof Constructor。

1. 使用示例

// 引用类型及其实例检测
console.log([] instanceof Array);             // true
console.log([] instanceof Object);            // true（Array 继承自 Object）
console.log(new Date() instanceof Date);      // true
console.log(/abc/ instanceof RegExp);         // true

// 自定义构造函数与类
class Person {}
const p = new Person();
console.log(p instanceof Person);             // true
console.log(p instanceof Object);             // true

// 原始数据类型（字面量）
console.log("hello" instanceof String);       // false（原始字面量没有原型链）
console.log(new String("hello") instanceof String); // true（显式包装对象）
console.log(123 instanceof Number);           // false
console.log(null instanceof Object);          // false

2. 底层原理与推导步骤

执行 L instanceof R 时，JavaScript 引擎会严格按照以下步骤推导：

1. 首先检查 R 是否为合法对象且具备 prototype 原型对象，若不是则抛出 TypeError。
2. 检查 L 是否为对象（包括函数），若 L 是原始值或 null，直接返回 false。
3. 取得 R.prototype 的内存引用目标，并取得 L.__proto__（即 Object.getPrototypeOf(L)）。
4. 开启循回比对：如果 L.__proto__ === R.prototype，则判定成立，返回 true。
5. 若不相等，则将 L 指向 L.__proto__ 继续向上查找，直到原型链顶端 null，此时返回 false。

图 2：instanceof 原型链向上回溯判定流程及跨上下文失效场景

3. 优缺点分析

方法三：constructor 属性

在 JavaScript 中，几乎每个对象都会从其原型对象（prototype）继承一个 constructor 属性，指向创建该实例的构造函数。通过 value.constructor === Type 可以进行类型比对。

1. 使用示例

// 基础数据类型（自动装箱机制）
console.log((123).constructor === Number);       // true
console.log("hello".constructor === String);     // true
console.log(true.constructor === Boolean);       // true
console.log(Symbol().constructor === Symbol);     // true

// 复杂引用类型
console.log([].constructor === Array);           // true
console.log([].constructor === Object);          // false（精准锁定直接构造器）
console.log(({}).constructor === Object);        // true
console.log((new Date()).constructor === Date);  // true

// 易错崩溃场景：null 与 undefined
try {
    const val = null;
    console.log(val.constructor);                // 抛出 TypeError
} catch (e) {
    console.error("null/undefined 无属性，直接报错！");
}

2. 核心特性与踩坑点

与 instanceof 相比，constructor 能够区分直接构造器与父级继承。例如 [].constructor === Object 明确为 false，避免了 instanceof 把数组同时判定为 Object 的广义泛化问题。

但 constructor 存在两个关键漏洞：

function Student() {}
Student.prototype = { study() {} }; // 重写 prototype 导致 constructor 丢失

const s = new Student();
console.log(s.constructor === Student); // false（回退指向 Object）
console.log(s.constructor === Object);  // true（发生误判）

3. 优缺点分析

方法四：Object.prototype.toString.call()

Object.prototype.toString.call(value) 是业界公认最权威、准确度最高的类型检测方法。它借用顶层 Object.prototype 上的原生 toString 方法，直接提取宿主环境内部维护的类型标记字符串。

1. 使用示例

// 原始数据类型
console.log(Object.prototype.toString.call(123));         // "[object Number]"
console.log(Object.prototype.toString.call("abc"));       // "[object String]"
console.log(Object.prototype.toString.call(true));        // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined));   // "[object Undefined]"
console.log(Object.prototype.toString.call(null));        // "[object Null]"
console.log(Object.prototype.toString.call(Symbol()));    // "[object Symbol]"
console.log(Object.prototype.toString.call(10n));         // "[object BigInt]"

// 原生内置复杂类型
console.log(Object.prototype.toString.call([]));          // "[object Array]"
console.log(Object.prototype.toString.call({}));          // "[object Object]"
console.log(Object.prototype.toString.call(new Date()));  // "[object Date]"
console.log(Object.prototype.toString.call(/abc/));       // "[object RegExp]"
console.log(Object.prototype.toString.call(new Map()));   // "[object Map]"
console.log(Object.prototype.toString.call(new Set()));   // "[object Set]"
console.log(Object.prototype.toString.call(new Error())); // "[object Error]"

2. ECMAScript 规范执行步骤与图解

当执行 Object.prototype.toString.call(O) 时，ECMAScript 规范定义的内部执行流程如下：

1. 如果 this 值为 undefined，直接返回 "[object Undefined]"。
2. 如果 this 值为 null，直接返回 "[object Null]"。
3. 将 this 通过 ToObject(this) 转化为对象（基础类型在此步骤生成包装对象）。
4. 检查该对象是否存在 Symbol.toStringTag 属性：
   • 若存在且为字符串，则返回 `[object ${tag}]`；
   • 若不存在，则按内置内部槽（[[BuiltinTag]]）读取对应类型名称，返回 "[object Type]"。

图 3：Object.prototype.toString.call 规范执行流程与 Tag 提取机制

3. 优缺点分析

四种方法综合对比与选型指南

为了直观呈现四种判断机制的技术特性与边界，下表整理了它们在各项典型测试场景下的表现矩阵：

图 4：JavaScript 类型检测工程化选型决策与组合优化方案

工程实践：封装通用类型判断工具函数

在实际生产项目中，单一方法通常难以同时兼顾执行效率与全场景准确度。业内主流类库（如 lodash 等）通常采用“快速路径 + 兜底借用”的组合封装策略：

/**
 * 严格、通用的 JavaScript 数据类型判断工具
 * @param {*} value - 待检测的任意目标值
 * @returns {string} - 标准小写类型名称，例如 "number", "array", "null", "date"
 */
function getType(value) {
    // 1. 处理 null 与 undefined 的快速返回
    if (value === null) return "null";
    if (value === undefined) return "undefined";

    // 2. 利用 typeof 极高运行速度处理基础类型与函数
    const type = typeof value;
    if (type !== "object") {
        return type;
    }

    // 3. 对复杂引用类型借用 Object.prototype.toString 进行精准解析
    // 截取 "[object Xxx]" 中的 Xxx 并转为小写
    return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

// 快速断言工具集
getType.isObject = (val) => getType(val) === "object";
getType.isArray = Array.isArray || ((val) => getType(val) === "array");
getType.isDate = (val) => getType(val) === "date";
getType.isRegExp = (val) => getType(val) === "regexp";

// 示例验证
console.log(getType(42));                // "number"
console.log(getType("text"));            // "string"
console.log(getType(null));              // "null"（规避 typeof 缺陷）
console.log(getType([]));                // "array"（精准区分数组）
console.log(getType(new Date()));        // "date"（精准区分日期）
console.log(getType(new Map()));         // "map"

这种封装方案的精妙之处在于：先通过 value === null 显式修正 typeof null === "object" 的历史设计问题；随后利用 typeof 极速判断 number、string、boolean、function 等高频类型；最后仅将复杂的引用对象交给 Object.prototype.toString.call() 统一裁决。既保障了高频运算时的极致性能，又确保了在多 iframe 和复杂对象场景下的零失误率。