JavaScript 判断数据类型的多种方法详解
本文总结了 JavaScript 中判断数据类型的几种常用方法。通过对比 typeof、instanceof、constructor 以及 Object.prototype.toString 的特性与局限,分析了它们在处理基本类型、对象、数组及 null 时的表现。文章还探讨了 jQuery 中 isWindow 的实现原理,旨在帮助开发者根据具体场景选择最合适的类型判断方式,避免常见陷阱。
使用 typeof 判断全局变量与基本类型
typeof 运算符在检查全局变量是否存在时较为常见。例如,当页面中定义了一个全局变量时,若直接进行如下判断:
//haorooms是全局变量
if(haorooms!=undefined){
}//js会报错,说"Uncaught ReferenceError: haorooms is not defined"
正确的处理方式应改为:
if(typeof haorooms!=undefined){
}
使用 typeof 后,即使变量未定义也不会抛出错误。这是 typeof 的一个典型应用场景。
此外,typeof 还可用于判断变量的数据类型,具体表现如下:
var haorooms="string"; console.log(haorooms); //string
var haorooms=1; console.log(haorooms); //number
var haorooms=false; console.log(haorooms); //boolean
var haorooms; console.log(typeof haorooms); //undfined
var haorooms= null; console.log(typeof haorooms); //object
var haorooms = document; console.log(typeof haorooms); //object
var haorooms = []; console.log(haorooms); //object
var haorooms = function(){}; console.log(typeof haorooms) //function 除了可以判断数据类型还可以判断function类型
由此可见,对于 typeof 而言,除了字符串、数字、布尔值和 undefined 这四种类型外,null、普通对象以及数组均返回 object 类型。
使用 instanceof 判断对象类型
instanceof 运算符可用于判断对象是否属于某个构造函数,常用于判断数组类型。
var haorooms=[];
console.log(haorooms instanceof Array) //返回true
利用 constructor 属性判断构造函数
constructor 属性返回对象对应的构造函数。利用该属性可以判断多种数据类型:
console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);
function employee(name,job,born){
this.name=name;
this.job=job;
this.born=born; }
var haorooms=new employee("Bill Gates","Engineer",1985);
console.log(haorooms.constructor); //输出function employee(name, jobtitle, born){this.name = name; this.jobtitle = job; this.born = born;}
通过输出 haorooms.constructor,可以看到 constructor 返回的是对象对应的构造函数定义。
使用 Object.prototype.toString 进行精确类型判断
Object.prototype.toString 前文提到了利用 constructor 属性来判定对象类型,接下来介绍 Object.prototype.toString 方法。
Object.prototype.toString.apply({}) // "[object Object]"
Object.prototype.toString.apply([]) // "[object Array]"
Object.prototype.toString.apply(NaN)// "[object Number]"
Object.prototype.toString.apply(function(){}) // "[object Function]"
使用该方法可以正确判断变量的基本类型,但对于自定义类型,结果仍为 [object Object],无法区分具体的自定义类型。
jQuery 中的类型判断实现原理
其他方法 jQuery 库也提供了类型判断的方法,示例如下:
$.isWindow(window) // true
其实现原理是什么?
core.js#479
isWindow: function( obj ) {
return obj != null && obj == obj.window;
}
因此,可以构造这样一个对象:
var fakeWindow;
fakeWindow = {};
fakeWindow.window = fakeWindow;
$.isWindow(fakeWindow) // true
这样即可通过 jQuery 的类型检测。
总结与注意事项
总结 在 JavaScript 中准确判断数据类型并非易事,需要深入钻研。根据具体场景设计判断逻辑至关重要,我们应思考如何用最简洁的方式判断正确类型。本文未涵盖所有方法,例如 isPrototypeOf 等。JavaScript 是一门带有历史包袱但不断进化的语言,使用时需注意其多面性,谨慎运用各种判断方式。
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
