JS 类型检测双雄typeofvsinstanceof深度解析“这个变量是数组吗”“这个对象是哪个类的实例”面对这些问题你该选谁typeof轻量级、快速适合基本类型。instanceof重量级、精准适合引用类型和继承关系。但它们都有各自的“盲区”。今天我们就来一次彻底的拆解。 目录⚡ 一句话总结核心区别typeof基本类型的守护者instanceof原型链的侦探⚠️ 经典陷阱与局限性 终极方案如何完美判断所有类型 总结1. ⚡ 一句话总结核心区别特性typeofinstanceof主要用途判断基本数据类型判断引用数据类型及继承关系返回值字符串如number,object布尔值true/false检测原理检查变量存储值的类型标签检查构造函数的prototype是否在对象的原型链上对null的表现object(历史 Bug)false对Array的表现object(无法区分)true(能准确识别)口诀基本类型用typeof引用类型instanceof。数组空值有坑点万能方法在后头。2. typeof基本类型的守护者typeof是一个操作符不是函数它返回一个表示类型的字符串。✅ 正确用法typeof100;// numbertypeofHello;// stringtypeoftrue;// booleantypeofundefined;// undefinedtypeofSymbol();// symboltypeof10n;// biginttypeoffunction(){};// function❌ 两大陷阱陷阱 1null被识别为objecttypeofnull;// object 原因这是 JS 早期的设计缺陷Bug。在底层二进制表示中null的前三位是000与对象相同。为了兼容性这个 Bug 一直保留至今。陷阱 2所有引用类型都返回objecttypeof[];// objecttypeof{};// objecttypeofnewDate();// objecttypeof/regex/;// object后果你无法通过typeof区分数组、普通对象、日期或正则表达式。3. instanceof原型链的侦探instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。语法object instanceof Constructor✅ 正确用法[]instanceofArray;// true{}instanceofObject;// truenewDate()instanceofDate;// true// 继承关系检测functionParent(){}functionChild(){}Child.prototypenewParent();constcnewChild();cinstanceofChild;// truecinstanceofParent;// true (因为原型链上有 Parent)cinstanceofObject;// true (所有对象最终都指向 Object) 底层原理instanceof的判断逻辑大致如下functionmyInstanceof(left,right){// 获取右操作数构造函数的原型letprototyperight.prototype;// 获取左操作数实例的原型leftleft.__proto__;// 或者 Object.getPrototypeOf(left)while(true){if(leftnull||leftundefined)returnfalse;if(leftprototype)returntrue;// 沿着原型链向上查找leftleft.__proto__;}}关键点它检测的是原型链而不是构造函数本身。这意味着它可以检测继承关系。4. ⚠️ 经典陷阱与局限性❌ 陷阱 1基本类型无法使用instanceofhelloinstanceofString;// false 123instanceofNumber;// false trueinstanceofBoolean;// false 原因hello是基本类型字符串没有原型链。String是包装对象。只有new String(hello)这样的对象才会返回true。注意虽然typeof hello是string但hello instanceof String是false。这是一个常见的面试坑。❌ 陷阱 2跨窗口/iframe 失效在不同的全局执行上下文如 iframe中每个窗口都有自己独立的Array、Object等构造函数。// 假设 iframe 中的数组constiframeArrayiframeWindow.array;iframeArrayinstanceofArray;// false!// 因为 iframeWindow.Array ! window.Array原因它们的原型对象不同尽管功能一样但引用地址不同。❌ 陷阱 3手动修改原型链会导致误判functionFoo(){}functionBar(){}Bar.prototypenewFoo();// 修改原型链constbnewBar();binstanceofFoo;// true (即使 b 不是直接由 Foo 创建的)这虽然是特性但在复杂继承结构中可能导致混淆。5. 终极方案如何完美判断所有类型既然typeof和instanceof都有缺陷有没有一种万能方法答案是Object.prototype.toString.call() 为什么它是王者每个对象内部都有一个[[Class]]属性在 ES5 之前不可访问但现在通过toString暴露。Object.prototype.toString会读取这个内部属性返回标准格式[object Type]。✅ 实战代码consttypeCheck(val){returnObject.prototype.toString.call(val);};// 基本类型typeCheck(100);// [object Number]typeCheck(Hello);// [object String]typeCheck(true);// [object Boolean]typeCheck(undefined);// [object Undefined]typeCheck(null);// [object Null] ✅ 完美解决 null 问题typeCheck(Symbol());// [object Symbol]// 引用类型typeCheck([]);// [object Array] ✅ 完美区分数组typeCheck({});// [object Object]typeCheck(newDate());// [object Date]typeCheck(/regex/);// [object RegExp]typeCheck(function(){});// [object Function]️ 封装一个实用工具函数functiongetType(val){// 截取 [object Type] 中的 Type 并转小写returnObject.prototype.toString.call(val).slice(8,-1).toLowerCase();}console.log(getType([]));// arrayconsole.log(getType(null));// nullconsole.log(getType(newDate()));// date优势准确能区分所有内置类型。兼容不受跨窗口影响因为调用的是原始Object.prototype上的方法。统一返回格式一致易于处理。 总结场景推荐方法示例判断基本类型typeoftypeof x number判断函数typeoftypeof x function判断数组/日期/正则Array.isArray()/instanceof/toStringArray.isArray(x)(最推荐数组)判断 null严格相等x null判断通用对象类型Object.prototype.toStringgetType(x) object判断继承关系instanceofx instanceof Parent 博主寄语不要迷信某一种方法。简单场景用typeof。数组判断首选Array.isArray()。复杂类型或需要精确分类时请毫不犹豫地使用Object.prototype.toString.call()。记住口诀typeof 辨基本instanceof 查原型。空值数组有特例toString 称大王。希望这篇文档能帮你彻底理清类型检测的思路如果有疑问欢迎在评论区留言。喜欢这篇文章吗记得点赞、收藏、转发哦❤️