JavaScript 判断数据类型的多种方法详解

作者:代码拾荒时间:2026-10-30 07:24:54浏览:456

本文总结了 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 是一门带有历史包袱但不断进化的语言,使用时需注意其多面性,谨慎运用各种判断方式。

作者最新文章