js检测数据类型四种办法

1.typeof

console.log(typeof "");            // String
console.log(typeof 1);             // number
console.log(typeof true);          // boolean
console.log(typeof null);          // object
console.log(typeof undefined);     // undefined
console.log(typeof []);            // object
console.log(typeof function(){});  // function
console.log(typeof {});            // object

可以看到，typeof对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用的。
2.instanceof

console.log("1" instanceof String);               //false
console.log(1 instanceof Number);                 //false
console.log(true instanceof Boolean);             //false
// console.log(null instanceof Null);             //Null is not defined            
//console.log(undefined instanceof Undefined);    //Undefined is not defined
console.log([] instanceof Array);                //true
console.log(function(){} instanceof Function);   //true
console.log({} instanceof Object);               //true

可以看到前三个都是以对象字面量创建的基本数据类型，但是却不是所属类的实例，这个就有点怪了。后面三个是引用数据类型，可以得到正确的结果。如果我们通过new关键字去创建基本数据类型，你会发现，这时就会输出true,如下:

console.log(new String("1") instanceof String);       // true
console.log(new Number(1) instanceof Number);         //true
console.log(new Boolean(true) instanceof Boolean);   //true

接下再来说说为什么null和undefined为什么比较特殊，实际上按理来说，null的所属类就是Null，undefined就是Undefined，但事实并非如此：控制台输出如下结果：

l浏览器压根不认识这两货，直接报错。在第一个例子你可能已经发现了，typeof null的结果是object，typeof undefined的结果是undefined

尤其是null，其实这是js设计的一个败笔，早期准备更改null的类型为null，由于当时已经有大量网站使用了null，如果更改，将导致很多网站的逻辑出现漏洞问题，就没有更改过来，于是一直遗留到现在。作为学习者，我们只需要记住就好。

3.constructor

console.log(("1").constructor === String);   //true
console.log((1).constructor === Number);  //true
console.log((true).constructor === Boolean); //true
//console.log((null).constructor === Null);  //VM471:1 Uncaught TypeError: Cannot read property 'constructor' of null at <anonymous>:1:20
//console.log((undefined).constructor === Undefined);//VM503:2 Uncaught TypeError: Cannot read property 'constructor' of undefined at <anonymous>:2:25
console.log(([]).constructor === Array); //true
console.log((function() {}).constructor === Function); //true
console.log(({}).constructor === Object); //true

（这里依然抛开null和undefined）乍一看，constructor似乎完全可以应对基本数据类型和引用数据类型，都能检测出数据类型，事实上并不是如此，来看看为什么：

function Fn(){};
Fn.prototype=new Array();
var f=new Fn();
console.log(f.constructor===Fn);      //false
console.log(f.constructor===Array);   //true

我声明了一个构造函数，并且把他的原型指向了Array的原型，所以这种情况下，constructor也显得力不从心了。

看到这里，是不是觉得绝望了。没关系，终极解决办法就是第四种办法，看过jQuery源码的人都知道，jQuery实际上就是采用这个方法进行数据类型检测的。

4.Object.prototype.toString.call()

var a = Object.prototype.toString;

console.log(a.call("aaa"));         //[object String]
console.log(a.call(1));             //[object Number]
console.log(a.call(true));          //[object Boolean]
console.log(a.call(null));          //[object Null]
console.log(a.call(undefined));  　　//[object Undefined]
console.log(a.call([]));　　　　　　　//[object Array]
console.log(a.call(function() {})); //[object Function]
console.log(a.call({}));            //[object Object]

可以看到，所有的数据类型，这个办法都可以判断出来。那就有人质疑了，假如我把他的原型改动一下呢？如你所愿，我们看一下：

function Fn(){};
Fn.prototype=new Array();
Object.prototype.toString.call(Fn)
//"[object Function]"

总结：typeof 适用于基本类型

　　　constructor 、instanceof 不适用null和undefined

　　　Object.prototype.toString.call 适用于全部

js检测数据类型四种办法

推荐阅读