JS判断数据类型：typeof、instanceof、constructor、prototype及jQuery.type()详解

JavaScript 数据类型判断方法概述

在 JavaScript 开发中，判断变量数据类型是常见需求，主要方法包括 typeof、instanceof、constructor、prototype 以及 jQuery.type()（或 $.type()）。本文将重点对比这几种方法的异同点与适用场景。

首先通过具体代码示例来直观展示各方法的输出结果。


var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};

typeof：基础类型判断

1、最常用的判断方式：typeof


alert(typeof a)  ------------> string
alert(typeof b)  ------------> number
alert(typeof c)  ------------> object
alert(typeof d)  ------------> object
alert(typeof e)  ------------> function
alert(typeof f)  ------------> function

使用 typeof 运算符返回的结果始终为字符串格式，这一点需要特别注意。例如：


alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false

此外，typeof 能够准确识别函数类型，在判断非 Object 类型的原始值或函数时，它是最便捷的选择。

instanceof：对象类型验证

2、针对已知对象类型的判断：instanceof


alert(c instanceof Array) ---------------> true
alert(d instanceof Date)
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false

使用 instanceof 时，右侧必须指定具体的对象类型，且严格区分大小写。该方法适用于需要根据特定对象类型进行条件分支处理的场景。

constructor：构造函数判断及继承陷阱

3、基于构造函数判断：constructor

通过比较对象的 constructor 属性，可以验证其类型。例如： alert(c.constructor === Array) ----------> true alert(d.constructor === Date) -----------> true alert(e.constructor === Function) -------> true

需要注意的是，当存在类继承关系时，constructor 的判断可能会失效或产生误导。

例如：


   function A(){};
   function B(){};
   A.prototype = new B(); //A继承自B
   var aObj = new A();
   alert(aobj.constructor === B) -----------> true;
   alert(aobj.constructor === A) -----------> false;

相比之下，instanceof 方法不受此影响，无论是直接继承还是间接继承，都会正确返回 true。


   alert(aobj instanceof B) ----------------> true;
   alert(aobj instanceof B) ----------------> true;

为了解决 constructor 在继承场景下的问题，通常的做法是手动将对象的 constructor 属性指向其原本的构造函数。


   aobj.constructor = A; //将自己的类赋值给对象的constructor属性
   alert(aobj.constructor === A) -----------> true;
   alert(aobj.constructor === B) -----------> false; //基类不会报true了;

prototype：通用但繁琐的判断方式

4、通用但较为繁琐的方法：prototype


alert(Object.prototype.toString.call(a) === ‘[object String]') -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]') -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]') -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]') -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]') -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]') -------> true;

该方法同样要求严格区分大小写，虽然书写相对繁琐，但其优势在于通用性强，能处理更多复杂情况。

jQuery.type()：综合判断方案

5、jQuery 提供的万能判断方法：jquery.type()

当传入的对象为 undefined 或 null 时，该方法会分别返回字符串 “undefined” 或 “null”。


jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

如果对象内部存在 [[Class]] 属性，且该属性与浏览器内置对象的 [[Class]] 相同，则返回对应的 [[Class]] 名称（关于此技术的更多细节可参考相关文档）。


jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"

对于其他所有情况，该方法将统一返回 “object”。

在实际开发中，通常优先使用 typeof 进行判断；若已知对象类型，可选用 instanceof 或 constructor；若前两者无法满足需求，则可使用 $.type() 作为兜底方案。

以上内容涵盖了 JavaScript 判断数据类型的主要方法及其优缺点，希望能为读者的学习或工作提供有益参考，感谢支持！

JavaScript 判断数据类型的五种方法对比与使用建议