前端面试之JavaScript -- JS中如何检测一个变量是什么类型

JS标准文档定义的类型

序号	[[Class]]	变量声明
01	Array	var arr = [1,2,3,4];
02	Boolean	var bool = true;
03	Date	var date = new Date();
04	Error	var err = new Error();
05	Function	var func = function(){console.log(‘this is function’);}
06	JSON	{name:“苏”,age:25};
07	Math	var pi = Math.PI;
08	Undefined	var und = undefined;
09	Null	var nul = null;
10	Number	var num = 123;
11	Object	var obj = Object();
12	RegExp	var reg = / ^ [a-zA-Z]{5,20}$ /;
13	String	var str = “abcdef”;

不同的检测方案

1、不完全准确的检测：typeof

//以string类型为例
var str = "abcdef";
//获取变量obj类型
typeof(str); //"string"
typeof str;  //"string"
str.constructor;  //ƒ String() { [native code] }
//检测变量obj是否为string类型
typeof(str) === 'string'; //true
typeof str=== 'string';  //true

---- typeof 检测出的类型

判断类型	typeof 判断结果
num	number
str	string
bool	boolean
arr	object
json	object
func	function
und	undefined
null	object
date	object
reg	object
error	object

优点：使用简单，能直接输出结果
缺点：检测出的类型太少，不能检测出object的具体类型

2、不完全准确的检测：instanceof

//instanceof用于识别正在处理的对象（Object）类型
function Person(){}
function Student(){}
Student.prototype = new Person();
var Tom = new Student();
console.log(Tom instanceof Person); //true
console.log(Tom instanceof Student); //true

---- instanceof 检测出的类型

变量	检测语句	结果
var num = 123;	num instanceof Number	false
var num = new Number(123);	num instanceof Number	true
var str = “abcdef”;	str instanceof String	false
var str = new String(“abcdef”);	str instanceof String	true
var bool = true;	bool instanceof Boolean	false
var bool = new Boolean(true);	bool instanceof Boolean	true
var arr = [1,2,3,4];	arr instanceof Array	true
{name:“苏”,age:25};	json instanceof Object	true
var func = function(){console.log(‘this is function’);}	func instanceof Function	true
var und = undefined;	und instanceof Object	false
var nul = null;	nul instanceof Object	false
var date = new Date();	date instanceof Date	true
var reg = / ^ [a-zA-Z]{5,20}$ /;	reg instanceof RegExp	true
var err = new Error();	err instanceof Error	true

优点：明确地确认对象(object)为某个特定类型；能检测出多层继承的关系
缺点：对number、string、boolean类型的变量声明方式有要求，必须用new方法声明才能检测，不能跨iframe

3、不完全准确的检测：constructor

var str = "abcdef";
str.constructor === String; //true
//输出数字类型变量的构造函数
var num = 123;
console.log(num.constructor); //function Number() { [native code] }

---- constructor 检测出的类型

变量	检测语句	结果
var Tom = new Person();	Tom.constructor == Person	true
var num = 123;	num.constructor == Number	true
var str = “abcdef”;	str.constructor == String	true
var bool = true;	bool.constructor == Boolean	true
var arr = [1,2,3,4];	arr.constructor == Array	true
{name:“苏”,age:25};	json.constructor == Object	true
var func = function(){console.log(‘this is function’);}	func.constructor == Function	true
var date = new Date();	date.constructor == Date	true
var reg = / ^ [a-zA-Z]{5,20}$ /;	reg.constructor == RegExp	true
var err = new Error();	err.constructor == Error	true

constructor：是原型对象的属性，指向构造函数，但根据实例对象寻找属性的顺序，如果实例对象上没有属性或方法时，就可以到原型链上寻找，所以实例对象也能使用constructor属性

优点：除了undefined和null，其他类型的变量都可以使用constructor检测
缺点：constructor属性可以被修改，会导致结果不正确，不能跨iframe

function Person(){}
function Student(){}
Student.prototype = new Person();
//Student原型中的constructor被指向到Person
var John = new Student();
console.log(John.constructor == Student);
console.log(John.constructor == Person);
//所以constructor检测不出实例对象John真实的构造函数

4、准确的检测：Object.prototype.toString.call

变量	检测语句	结果
var num = 123;	Object.prototype.toString.call(num)	‘[object Number]’
var str = “abcdef”;	Object.prototype.toString.call(str)	‘[object String]’
var bool = true;	Object.prototype.toString.call(bool)	‘[object Boolean]’
var arr = [1,2,3,4];	Object.prototype.toString.call(arr)	‘[object Array]’
{name:“苏”,age:25};	Object.prototype.toString.call(json)	‘[object Object]’
var func = function(){console.log(‘this is function’);}	Object.prototype.toString.call(func)	‘[object Function]’
var und = undefined;	Object.prototype.toString.call(und)	‘[object Undefined]’
var nul = null;	Object.prototype.toString.call(nul)	‘[object Null]’
var date = new Date();	Object.prototype.toString.call(date)	‘[object Date]’
var reg = / ^ [a-zA-Z]{5,20}$ /;	Object.prototype.toString.call(reg)	‘[object RegExp]’
var err = new Error();	Object.prototype.toString.call(err)	‘[object Error]’

Object.prototype.toString先取得对象的内部属性[[Class]]，然后依据这个属性返回一个类似于"[Object Array]"的字符串作为结果，再配合call可以取得任何对象的内部属性，然后把类型检测转化为字符串比较。
优点：能检测出所有的类型
缺点：IE6下undefined、null均为Object类型

5、使用JQuery中的检测：$.type

变量	检测语句	结果
var num = 123;	$.type(num)	‘number’
var str = “abcdef”;	$.type(str)	‘string’
var bool = true;	$.type(bool)	‘boolean’
var arr = [1,2,3,4];	$.type(arr)	‘array’
{name:“苏”,age:25};	$.type(json)	‘object’
var func = function(){console.log(‘this is function’);}	$.type(func)	‘function’
var und = undefined;	$.type(und)	‘undefined’
var nul = null;	$.type(nul)	‘null’
var date = new Date();	$.type(date)	‘date’
var reg = / ^ [a-zA-Z]{5,20}$ /;	$.type(reg)	‘regexp’
var err = new Error();	$.type(err)	‘error’

可以看出，JQuery中的$ .type的输出结果和Object.prototype.toString.call的输出结果很像，因为$.type就是用Object.prototype.toString.call实现的。

总结

1. Number、String、Boolean 类型变量的检测：typeof
2. Array、JSON、Function、Undefined、Null、Date、RegExp、Error 等 Object 和 Function 类型变量的检测：推荐使用Object.prototype.toString.call 以及 $.type