JS中typeof与instanceof的区别
typeof
和 instanceof
在 JavaScript 里虽然都是用来判断类型的,但它们的工作方式、适用场景和返回值有很大区别。
我帮你分成几个维度对比一下:
1. 基本语法
typeof value // 返回一个表示类型的字符串
value instanceof Constructor // 返回 true 或 false
2. 作用范围
特性 | typeof | instanceof |
---|---|---|
作用对象 | 基本类型(number, string, boolean, symbol, bigint, undefined)和引用类型(object, function) | 只能判断引用类型(对象、数组、函数等),不能判断原始类型 |
返回值 | 一个字符串(如 "number" 、"string" 、"object" ) | 布尔值(true / false) |
3. 适用场景
typeof
主要用于基本类型的判断(除了
null
)。语法简单,性能好,但对对象的区分能力差。
typeof 123; // "number"
typeof "hello"; // "string"
typeof undefined; // "undefined"
typeof true; // "boolean"
typeof Symbol(); // "symbol"
typeof 10n; // "bigint"// 对对象的判断很模糊
typeof {}; // "object"
typeof []; // "object"
typeof null; // "object" <-- 历史遗留 bug
typeof function(){}; // "function" (特殊情况)
instanceof
用于判断某个对象是否是某个构造函数的实例(依赖原型链)。
更适合复杂对象类型判断,比如
Array
、Date
、RegExp
等。
[] instanceof Array; // true
[] instanceof Object; // true (Array 继承自 Object)
new Date() instanceof Date; // true
/abc/ instanceof RegExp; // true// 原始类型不行
123 instanceof Number; // false
"abc" instanceof String; // false
4. 工作原理差异
typeof
直接读取内部的[[Type]]
(对原始类型)或部分特殊规则(函数)。instanceof
检查 对象的原型链 是否能找到目标构造函数的prototype
属性:obj instanceof Constructor // 等价于: // Constructor.prototype 是否出现在 obj 的原型链上
5. 注意事项
typeof null
是"object"
—— 这是 JavaScript 设计早期的 bug。instanceof
在多 iframe / 多 window 环境下可能会失效,因为不同全局环境的构造函数不一样。基本类型用
typeof
,对象类型用instanceof
更稳妥。判断数组更推荐
Array.isArray()
,因为跨环境也安全:Array.isArray([]); // true
总结对比表
对比点 | typeof | instanceof |
---|---|---|
返回值类型 | 字符串 | 布尔值 |
可判断 | 基本类型 + 引用类型(精确度有限) | 引用类型(对象、数组、函数等) |
判断原理 | 内部类型标签([[Type]] ) | 检查原型链 |
适用场景 | 判断原始类型 | 判断某对象是否属于某构造函数 |
特殊问题 | null 返回 "object" | 跨 iframe/window 可能失效 |