JavaScript中判断对象类型方法大全2

在JavaScript中，有5种基本数据类型和1种复杂数据类型，基本数据类型有：Undefined, Null, Boolean, Number和String；复杂数据类型是Object，Object中还细分了很多具体的类型，比如：Array, Function, Date等等

在JavaScript中，有5种基本数据类型和1种复杂数据类型，基本数据类型有：Undefined, Null, Boolean, Number和String；复杂数据类型是Object，Object中还细分了很多具体的类型，比如：Array, Function, Date等等。今天我们就来探讨一下，使用什么方法判断一个出一个变量的类型。

在讲解各种方法之前，我们首先定义出几个测试变量，看看后面的方法究竟能把变量的类型解析成什么样子，以下几个变量差不多包含了我们在实际编码中常用的类型。

1 var num = 123;
2 var str = 'abcdef';
3 var bool = true;
4 var arr = [1, 2, 3, 4];
5 var json = {name:'wenzi', age:25};
6 var func = function(){ console.log('this is function'); }
7 var und = undefined;
8 var nul = null;
9 var date = new Date();
10 var reg = /^[a-zA-Z]{5,20}$/;
11 var error= new Error();

1. 使用typeof检测

我们平时用的最多的就是用typeof检测变量类型了。这次，我们也使用typeof检测变量的类型：

1 console.log(
2     typeof num,
3     typeof str,
4     typeof bool,
5     typeof arr,
6     typeof json,
7     typeof func,
8     typeof und,
9     typeof nul,
10     typeof date,
11     typeof reg,
12     typeof error
13 );
14 // number string boolean object object function undefined object object object object

从输出的结果来看，arr, json, nul, date, reg, error 全部被检测为object类型，其他的变量能够被正确检测出来。当需要变量是否是number, string, boolean, function, undefined, json类型时，可以使用typeof进行判断。其他变量是判断不出类型的，包括null。
还有，typeof是区分不出array和json类型的。因为使用typeof这个变量时，array和json类型输出的都是object。

2. 使用instance检测

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。例如

1 function Person(){
2
3 }
4 var Tom = new Person();
5 console.log(Tom instanceof Person); // true

我们再看看下面的例子：

1 function Person(){
2
3 }
4 function Student(){
5
6 }
7 Student.prototype = new Person();
8 var John = new Student();
9 console.log(John instanceof Student); // true
10 console.log(John instancdof Person); // true

instanceof还能检测出多层继承的关系。
好了，我们来使用instanceof检测上面的那些变量：

1 console.log(
2     num instanceof Number,
3     str instanceof String,
4     bool instanceof Boolean,
5     arr instanceof Array,
6     json instanceof Object,
7     func instanceof Function,
8     und instanceof Object,
9     nul instanceof Object,
10     date instanceof Date,
11     reg instanceof RegExp,
12     error instanceof Error
13 )
14 // num : false
15 // str : false
16 // bool : false
17 // arr : true
18 // json : true
19 // func : true
20 // und : false
21 // nul : false
22 // date : true
23 // reg : true
24 // error : true

从上面的运行结果我们可以看到，num, str和bool没有检测出他的类型，但是我们使用下面的方式创建num，是可以检测出类型的：

1 var num = new Number(123);
2 var str = new String('abcdef');
3 var boolean = new Boolean(true);

同时，我们也要看到，und和nul是检测的Object类型，才输出的true，因为js中没有Undefined和Null的这种全局类型，他们und和nul都属于Object类型，因此输出了true。

3. 使用constructor检测

在使用instanceof检测变量类型时，我们是检测不到number, ‘string', bool的类型的。因此，我们需要换一种方式来解决这个问题。
constructor本来是原型对象上的属性，指向构造函数。但是根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的。
我们先来输出一下num.constructor的内容，即数字类型的变量的构造函数是什么样子的：

function Number() { [native code] }

我们可以看到它指向了Number的构造函数，因此，我们可以使用num.constructor==Number来判断num是不是Number类型的，其他的变量也类似：

1 function Person(){
2
3 }
4 var Tom = new Person();
5
6 // undefined和null没有constructor属性
7 console.log(
8     Tom.constructor==Person,
9     num.constructor==Number,
10     str.constructor==String,
11     bool.constructor==Boolean,
12     arr.constructor==Array,
13     json.constructor==Object,
14     func.constructor==Function,
15     date.constructor==Date,
16     reg.constructor==RegExp,
17     error.constructor==Error
18 );
19 // 所有结果均为true

从输出的结果我们可以看出，除了undefined和null，其他类型的变量均能使用constructor判断出类型。
不过使用constructor也不是保险的，因为constructor属性是可以被修改的，会导致检测出的结果不正确，例如：

1 function Person(){
2
3 }
4 function Student(){
5
6 }
7 Student.prototype = new Person();
8 var John = new Student();
9 console.log(John.constructor==Student); // false
10 console.log(John.constructor==Person); // true

在上面的例子中，Student原型中的constructor被修改为指向到Person，导致检测不出实例对象John真实的构造函数。
同时，使用instaceof和construcor,被判断的array必须是在当前页面声明的！比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个array，并将其赋值给父页面的一个变量，这时判断该变量，Array == object.constructor;会返回false； 原因：
1、array属于引用型数据，在传递过程中，仅仅是引用地址的传递。
2、每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array；切记，不然很难跟踪问题！
4. 使用Object.prototype.toString.call

我们先不管这个是什么，先来看看他是怎么检测变量类型的：

1 prototype.toString.call(num),
2     Object.prototype.toString.call(str),
3     Object.prototype.toString.call(bool),
4     Object.prototype.toString.call(arr),
5     Object.prototype.toString.call(json),
6     Object.prototype.toString.call(func),
7     Object.prototype.toString.call(und),
8     Object.prototype.toString.call(nul),
9     Object.prototype.toString.call(date),
10     Object.prototype.toString.call(reg),
11     Object.prototype.toString.call(error)
12 );
13 // '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]'
14 // '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]'

从输出的结果来看，Object.prototype.toString.call(变量)输出的是一个字符串，字符串里有一个数组，第一个参数是Object，第二个参数就是这个变量的类型，而且，所有变量的类型都检测出来了，我们只需要取出第二个参数即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"来检测变量arr是不是数组。
我们现在再来看看ECMA里是是怎么定义Object.prototype.toString.call的：

复制代码 代码如下:

1 Object.prototype.toString( ) When the toString method is called, the following steps are taken:
2 Get the [[Class]] property of this object.
3 Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
4 Return Result (2)

上面的规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]”的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
5. jquery中$.type的实现

在jquery中提供了一个$.type的接口，来让我们检测变量的类型：

1 console.log(
2     $.type(num),
3     $.type(str),
4     $.type(bool),
5     $.type(arr),
6     $.type(json),
7     $.type(func),
8     $.type(und),
9     $.type(nul),
10     $.type(date),
11     $.type(reg),
12     $.type(error)
13 );
14 // number string boolean array object function undefined null date regexp error

看到输出结果，有没有一种熟悉的感觉？对，他就是上面使用Object.prototype.toString.call(变量)输出的结果的第二个参数呀。
我们这里先来对比一下上面所有方法检测出的结果，横排是使用的检测方法， 竖排是各个变量：

类型判断	typeof	instanceof	constructor	toString.call	$.type
num	number	false	true	[object Number]	number
str	string	false	true	[object String]	string
bool	boolean	false	true	[object Boolean]	boolean
arr	object	true	true	[object Array]	array
json	object	true	true	[object Object]	object
func	function	true	true	[object Function]	function
und	undefined	false	-	[object Undefined]	undefined
nul	object	false	-	[object Null]	null
date	object	true	true	[object Date]	date
reg	object	true	true	[object RegExp]	regexp
error	object	true	true	[object Error]	error
优点	使用简单，能直接输出结果	能检测出复杂的类型	基本能检测出所有的类型	检测出所有的类型	-
缺点	检测出的类型太少	基本类型检测不出，且不能跨iframe	不能跨iframe，且constructor易被修改	IE6下undefined,null均为Object	-

这样对比一下，就更能看到各个方法之间的区别了，而且Object.prototype.toString.call和$type输出的结果真的很像。我们来看看jquery（2.1.2版本）内部是怎么实现$.type方法的：

1 // 实例对象是能直接使用原型链上的方法的
2 var class2type = {};
3 var toString = class2type.toString;
4
5 // 省略部分代码...
6
7 type: function( obj ) {
8     if ( obj == null ) {
9         return obj + "";
10     }
11     // Support: Android<4.0, iOS<6 (functionish RegExp)
12     return (typeof obj === "object" || typeof obj === "function") ?
13         (class2type[ toString.call(obj) ] || "object") :
14         typeof obj;
15 },
16
17 // 省略部分代码...
18
19 // Populate the class2type map
20 jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
21     class2type[ "[object " + name + "]" ] = name.toLowerCase();
22 });

我们先来看看jQuery.each的这部分：

1 // Populate the class2type map
2 jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
3     class2type[ "[object " + name + "]" ] = name.toLowerCase();
4 });
5
6 //循环之后，`class2type`的值是：
7 class2type = {
8     '[object Boolean]' : 'boolean',
9     '[object Number]' : 'number',
10     '[object String]' : 'string',
11     '[object Function]': 'function',
12     '[object Array]'  : 'array',
13     '[object Date]'  : 'date',
14     '[object RegExp]' : 'regExp',
15     '[object Object]' : 'object',
16     '[object Error]'  : 'error'
17 }

再来看看type方法：

1 // type的实现
2 type: function( obj ) {
3     // 若传入的是null或undefined，则直接返回这个对象的字符串
4     // 即若传入的对象obj是undefined，则返回"undefined"
5     if ( obj == null ) {
6         return obj + "";
7     }
8     // Support: Android<4.0, iOS<6 (functionish RegExp)
9     // 低版本regExp返回function类型；高版本已修正，返回object类型
10     // 若使用typeof检测出的obj类型是object或function，则返回class2type的值，否则返回typeof检测的类型
11     return (typeof obj === "object" || typeof obj === "function") ?
12         (class2type[ toString.call(obj) ] || "object") :
13         typeof obj;
14 }

当typeof obj === "object" || typeof obj === "function"时，就返回class2type[ toString.call(obj)。到这儿，我们就应该明白为什么Object.prototype.toString.call和$.type那么像了吧，其实jquery中就是用Object.prototype.toString.call实现的，把'[object Boolean]'类型转成'boolean'类型并返回。若class2type存储的没有这个变量的类型，那就返回”object”。
除了”object”和”function”类型，其他的类型则使用typeof进行检测。即number, string, boolean类型的变量，使用typeof即可。