103.JavaScript判断变量是否是某一类型

JavaScript数据类型：

JavaScript中，有5种基本数据类型和1种复杂数据类型。
基本数据类型有：Undefined, Null, Boolean, Number和String；
复杂数据类型是Object，Object中还细分了很多具体的类型，比如：Array, Function, Date等。
var num = 123;
var str = ‘abcdef’;
var bool = true;
var arr = [1, 2, 3, 4];
var json = { name: ‘wenzi’, age: 25 };
var func = function () { console.log(‘this is function’); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error = new Error();

方法1：使用typeof检测

用法示例

var arr = [];
typeof arr; //‘object’
typeof(arr); //‘object’
typeof实际上是一个一元运算符，因此可以用上述代码所示的两种用法。

typeof所支持的数据类型

从上表可以看出，typeof支持的数据类型还是比较齐全的，除了俩比较特殊以外：

• 对Null使用typeof返回object，这跟我们的认知还是有一定差距的，这是javascript的一个设计上的bug，ECMAScript 6中有提议修改此bug，但已经被否决了；不过只要加个逻辑非!运算符，就能把Null这种情况给排除了。
• 除了function以外，其它具体的对象类型都无法判断出来。

  typeof浏览器兼容性注意点

  对正则表达式字面量的类型判断在某些浏览器中不符合标准：

  typeof /s/ === ‘function’; // Chrome 1-12 , 不符合 ECMAScript 5.1
  typeof /s/ === ‘object’; // Firefox 5+ , 符合 ECMAScript 5.1

  IE 宿主对象是对象而不是函数

  在 IE 6, 7 和 8 中，大多数的宿主对象是对象，而不是函数，例如：
  typeof alert === ‘object’

  例1：

  console.log(
  typeof num,
  typeof str,
  typeof bool,
  typeof arr,
  typeof json,
  typeof func,
  typeof und,
  typeof nul,
  typeof date,
  typeof reg,
  typeof error
  );
  // 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：使用 instanceof

  ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。
  instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。
  与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

  例1：instanceof还能检测出多层继承的关系。

  console.log(
  num instanceof Number,
  str instanceof String,
  bool instanceof Boolean,
  arr instanceof Array,
  json instanceof Object,
  func instanceof Function,
  und instanceof Object,
  nul instanceof Object,
  date instanceof Date,
  reg instanceof RegExp,
  error instanceof Error
  )
  // num : false
  // str : false
  // bool : false
  // arr : true
  // json : true
  // func : true
  // und : false
  // nul : false
  // date : true
  // reg : true
  // error : true
  num, str和bool没有检测出他的类型，但是使用下面的方式创建num，是可以检测出类型的：
  var num = new Number(123);
  var str = new String(‘abcdef’);
  var boolean = new Boolean(true);
  也要看到，und和nul是检测的Object类型，才输出的true，因为js中没有Undefined和Null的这种全局类型，他们und和nul都属于Object类型，因此输出了true。

  例3：

  function Person() {
  }
  function Student() {
  }
  Student.prototype = new Person();
  var John = new Student();
  console.log(John instanceof Student); // true
  console.log(John instancdof Person); // true

例4：

function Person() {
}
var Tom = new Person();
console.log(Tom instanceof Person); // true

例5：

var a = new Blob([‘test text’], { type: ‘text/plain’ });
console.log(a instanceof Blob) // true

方法3. 使用constructor检测

constructor本来是原型对象上的属性，指向构造函数。但是根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的。<br />先来输出一下num.constructor的内容，即数字类型的变量的构造函数是什么样子的：<br />function Number() { [native code] }<br />可以看到它指向了Number的构造函数，因此，可以使用num.constructor==Number来判断num是不是Number类型的，其他的变量也类似：<br />    function Person() {<br />}<br />var Tom = new Person();<br />// undefined和null没有constructor属性<br />console.log(<br />    Tom.constructor == Person,<br />    num.constructor == Number,<br />    str.constructor == String,<br />    bool.constructor == Boolean,<br />    arr.constructor == Array,<br />    json.constructor == Object,<br />    func.constructor == Function,<br />    date.constructor == Date,<br />    reg.constructor == RegExp,<br />    error.constructor == Error<br />);<br />// 所有结果均为true<br />从输出的结果可以看出，除了undefined和null，其他类型的变量均能使用constructor判断出类型。<br />不过使用constructor也不是保险的，因为constructor属性是可以被修改的，会导致检测出的结果不正确，例如：<br />function Person() {<br />}<br />function Student() {<br />}<br />Student.prototype = new Person();<br />var John = new Student();<br />console.log(John.constructor == Student); // false<br />console.log(John.constructor == Person); // true<br />在上面的例子中，Student原型中的constructor被修改为指向到Person，导致检测不出实例对象John真实的构造函数。<br />同时，使用instaceof和construcor,被判断的array必须是在当前页面声明的！比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个array，并将其赋值给父页面的一个变量，这时判断该变量，Array == object.constructor;会返回false； 原因：<br />1、array属于引用型数据，在传递过程中，仅仅是引用地址的传递。<br />2、每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array；切记，不然很难跟踪问题！

方法4：Object.prototype.toString.call(变量)这个方法会返回不同的结果；

例1：

console.log(
Object.prototype.toString.call(num),
Object.prototype.toString.call(str),
Object.prototype.toString.call(bool),
Object.prototype.toString.call(arr),
Object.prototype.toString.call(json),
Object.prototype.toString.call(func),
Object.prototype.toString.call(und),
Object.prototype.toString.call(nul),
Object.prototype.toString.call(date),
Object.prototype.toString.call(reg),
Object.prototype.toString.call(error)
);
// ‘[object Number]’ ‘[object String]’ ‘[object Boolean]’ ‘[object Array]’ ‘[object Object]’
// ‘[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的：
Object.prototype.toString() When the toString method is called, the following steps are taken:
1. Get the[[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result(1), and “]”.
3. Return Result(2)
上面的规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]”的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到目的。

例3：

var a;
Object.prototype.toString.call(a); “[object Undefined]”
var a = [];
Object.prototype.toString.call(a); “[object Array]”
var a = {};
Object.prototype.toString.call(a); “[object Object]”
var a = 1;
Object.prototype.toString.call(a); “[object Number]”
var a = ‘1’;
Object.prototype.toString.call(a); “[object String]”
var a = null;
Object.prototype.toString.call(a); “[object Null]”

方法5（第三方类库）. jquery中$.type的实现

在jquery中提供了一个$.type的接口，来让检测变量的类型：
console.log(
$.type(num),
$.type(str),
$.type(bool),
$.type(arr),
$.type(json),
$.type(func),
$.type(und),
$.type(nul),
$.type(date),
$.type(reg),
$.type(error)
);
// number string boolean array object function undefined null date regexp error
看到输出结果，有没有一种熟悉的感觉？对，他就是上面使用Object.prototype.toString.call(变量)输出的结果的第二个参数呀。

结果对比：

这里先来对比一下上面所有方法检测出的结果，横排是使用的检测方法， 竖排是各个变量：

Object.prototype.toString.call和$type对比

这样对比一下，就更能看到各个方法之间的区别了，而且Object.prototype.toString.call和$type输出的结果真的很像。来看看jquery（2.1.2版本）内部是怎么实现$.type方法的：
// 实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;
// 省略部分代码…
type: function(obj) {
if (obj == null) {
return obj + “”;
}
// Support: Android<4.0, iOS<6 (functionish RegExp)
return (typeof obj === “object” || typeof obj === “function”) ?
(class2type[toString.call(obj)] || “object”) :
typeof obj;
},
// 省略部分代码…
// Populate the class2type map
jQuery.each(“Boolean Number String Function Array Date RegExp Object Error”.split(“ “), function (i, name) {
class2type[“[object “ + name + “]”] = name.toLowerCase();
});
先来看看jQuery.each的这部分：
// Populate the class2type map
jQuery.each(“Boolean Number String Function Array Date RegExp Object Error”.split(“ “), function (i, name) {
class2type[“[object “ + name + “]”] = name.toLowerCase();
});
//循环之后，class2type的值是：
class2type = {
‘[object Boolean]’: ‘boolean’,
‘[object Number]’: ‘number’,
‘[object String]’: ‘string’,
‘[object Function]’: ‘function’,
‘[object Array]’: ‘array’,
‘[object Date]’: ‘date’,
‘[object RegExp]’: ‘regExp’,
‘[object Object]’: ‘object’,
‘[object Error]’: ‘error’
}
再来看看type方法：
// type的实现
type: function(obj) {
// 若传入的是null或undefined，则直接返回这个对象的字符串
// 即若传入的对象obj是undefined，则返回”undefined”
if (obj == null) {
return obj + “”;
}
// Support: Android<4.0, iOS<6 (functionish RegExp)
// 低版本regExp返回function类型；高版本已修正，返回object类型
// 若使用typeof检测出的obj类型是object或function，则返回class2type的值，否则返回typeof检测的类型
return (typeof obj === “object” || typeof obj === “function”) ?
(class2type[toString.call(obj)] || “object”) :
typeof obj;
}
当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即可。

实例对比：

var allVarMap = {
// 数字
num: 123,
// Infinity
num1: 1 / 0,
// NaN
num2: null / 0,
// 字符串
str: ‘abcdef’,
// 布尔类型
bool: true,
// 数组
arr: [1, 2, 3, 4],
// json对象
json: { name: ‘wenzi’, age: 25 },
// 函数
func: function () { console.log(‘this is function’); },
// 箭头函数
func1: () => { console.log(‘arrow function’) },
// undefined类型
und: undefined,
// null类型
nul: null,
// date类型
date: new Date(),
// 正则表达式
reg: /^[a-zA-Z]{5,20}$/,
// 异常类型
error: new Error()
}

第一步：typeof判断变量类型

typeof运算符用于判断对象的类型，但是对于一些创建的对象，它们都会返回object。我们用该函数来判断上面的结果：
var results = []
for (let i in allVarMap) {
results.push(typeof allVarMap[i])
}
console.log(results.join())
// number,number,number,string,boolean,object,object,function,function,undefined,object,object,object,object
可以看到，NaN和Infinity都检查为number类型，其他的 string,function,boolean,undefined包括箭头函数都能正确检查出来，但是对于reg,date,null都得到了object。看来还需要具体的判断。

instanceof检查

ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

console.log(allVarMap.date instanceof Date) // true
console.log(allVarMap.func instanceof Function) // true
可以看到instanceof可以正确判断出date,func的类型，但是前提是已知该变量的类型，所以这里不符合我们的预期。

使用Object.prototype.toString.call

定义：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]“的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
看看下面的函数运行结果：
var results = []
for (let i in allVarMap) {
results.push(Object.prototype.toString.call(allVarMap[i]))
}
console.log(results.join())
// [object Number],[object Number],[object Number],[object String],[object Boolean],[object Array],[object Object],[object Function],[object Function],[object Undefined],[object Null],[object Date],[object RegExp],[object Error]
可以看到该函数正确的返回了所有变量的类型，我们只要取出返回结果中的字符串，就能得到变量的类型。

实现getValType函数

根据上面的分析，我们可以先用typeOf函数判断出基础类型number,string,function,boolean,undefined。然后如果结果是object，我们再用Object.prototype.toString.call来判断出具体的类型。
var getVarType = function (val = 0) {
var type = typeof val
// object需要使用Object.prototype.toString.call判断
if (type === ‘object’) {
var typeStr = Object.prototype.toString.call(val)
// 解析[object String]
typeStr = typeStr.split(‘ ‘)[1]
type = typeStr.substring(0, typeStr.length - 1)
}
return type
}
var results = []
for (let i in allVarMap) {
results.push(getVarType(allVarMap[i]))
}
console.log(results.join())
// number,number,number,string,boolean,Array,Object,function,function,number,Null,Date,RegExp,Error
可以看到，完美判断出了所有变量的类型，该函数可以再添加一些逻辑，判断一个变量是否是NaN,Infinity之类的特殊需求。

总结

1. typeOf能判断出一个变量的类型，但是只能判断出number,string,function,boolean,undefined,null和其他对象类型返回结果都为object.
2. instanceof能判断出一个对象是否是另一个类的实例。
3. Object.prototype.toString.call能判断出所有变量的类型，返回值为[Object *]。
4. 以上这几种方法都有不同程度的缺陷，如果从实用性的角度来考虑，可以综合一下：

function type(obj) {
console.dir(obj);
if (!obj) {
return Object.prototype.toString.call(obj).slice(8, -1);
}
return obj.constructor.toString().match(/function\s([^(])/)[1];
}
var t = type(1) // t===”number”
var t = type(new Number(1)) // t===”number”
var t = type(“abc”) // t===”string”
var t = type(new String(“abc”)) // t===”string”
var t = type(true) // t===”boolean”
var t = type(undefined) // t===”undefined”
var t = type(null) // t===”null”
var t = type({}) // t===”object”
var t = type([]) // t===”array”
var t = type(new Date) // t===”date”
var t = type(/\d/) // t===”regexp”
var t = type(function () { }) // t===”function”