检测出所有的类型最好的方法object.prototype.toString.call()

首先简单的说一下js中的几种数据类型
数据类型分为基本类型和引用类型：
基本类型：String、Number、Boolean、Null、Undefined、symbol
引用类型：Object、Array、Date、Function、Error、RegExp、Math、Number、String、Boolean、Globle。
然后判断数据类型的方法一般可以通过：typeof、instanceof、constructor、toString四种常用方法。

一、typeof:（可以对基本类型做出准确的判断，但对于引用类型，用它就有点力不从心了）

typeof 返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、object、undefined、function等6种数据类型。
typeof 可以对JS基本数据类型做出准确的判断（除了null），而对于引用类型返回的基本上都是object, 其实返回object也没有错，因为所有对象的原型链最终都指向了Object,Object是所有对象的祖宗。 但当我们需要知道某个对象的具体类型时，typeof 就显得有些力不从心了。
注意：typeof null会返回object，因为特殊值null被认为是一个空的对象引用

二、instanceof

判断对象和构造函数在原型链上是否有关系，如果有关系，返回真，否则返回假

function Aaa(){}
var a1 = new Aaa(); 
//alert( a1 instanceof Aaa);  //true
//判断a1和Aaa是否在同一个原型链上，是的话返回真，否则返回假 

var arr = []; 
alert( arr instanceof Aaa);//false

我们来看一下

var str = 'hello';    
alert(str instanceof String);//false    
var bool = true;    
alert(bool instanceof Boolean);//false    
var num = 123;    
alert(num instanceof Number);//false    
var nul = null;    
alert(nul instanceof Object);//false    
var und = undefined;    
alert(und instanceof Object);//false    
var oDate = new Date();    
alert(oDate instanceof Date);//true    
var json = {};    
alert(json instanceof Object);//true    
var arr = [];    
alert(arr instanceof Array);//true    
var reg = /a/;    
alert(reg instanceof RegExp);//true    
var fun = function(){};    
alert(fun instanceof Function);//true    
var error = new Error();    
alert(error instanceof Error);//true

从上面的运行结果我们可以看到，基本数据类型是没有检测出他们的类型，但是我们使用下面的方式创建num、str、boolean，是可以检测出类型的：

var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);
三、constructor：查看对象对应的构造函数

constructor 在其对应对象的原型下面，是自动生成的。当我们写一个构造函数的时候，程序会自动添加：构造函数名.prototype.constructor = 构造函数名

function Aaa(){}
//Aaa.prototype.constructor = Aaa;//每一个函数都会有的，都是自动生成的   

 //Aaa.prototype.constructor = Aaa;

判断数据类型的方法

 var str = 'hello';    
alert(str.constructor == String);//true    
var bool = true;    
alert(bool.constructor == Boolean);//true    
var num = 123;    
alert(num.constructor ==Number);//true   
// var nul = null;   
// alert(nul.constructor == Object);//报错    
//var und = undefined;   
//alert(und.constructor == Object);//报错    
var oDate = new Date();    
alert(oDate.constructor == Date);//true    
var json = {};    
alert(json.constructor == Object);//true    
var arr = [];    
alert(arr.constructor == Array);//true    
var reg = /a/;    
alert(reg.constructor == RegExp);//true    
var fun = function(){};    
alert(fun.constructor ==Function);//true    
var error = new Error();    
alert(error.constructor == Error);//true

从上面的测试中我们可以看到，undefined和null是不能够判断出类型的，并且会报错。因为null和undefined是无效的对象，因此是不会有constructor存在的
同时我们也需要注意到的是：使用constructor是不保险的，因为constructor属性是可以被修改的，会导致检测出的结果不正确

function Aaa(){}
Aaa.prototype.constructor = Aaa;//程序可以自动添加，当我们写个构造函数的时候，程序会自动添加这句代码

function BBB(){}
Aaa.prototype.constructor = BBB;//此时我们就修改了Aaa构造函数的指向问题

alert(Aaa.construtor==Aaa);//false

可以看出，constructor并没有正确检测出正确的构造函数

四、Object.prototype.toString(可以说不管是什么类型，它都可以立即判断出)

toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是 toString运行时this指向的对象类型, 返回的类型
格式为[object xxx],xxx是具体的数据类型，其中包括：
String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument,... 基本上所有对象的类型都可以通过这个方法获取到。

var str = 'hello';
console.log(Object.prototype.toString.call(str));//[object String]
var bool = true;
console.log(Object.prototype.toString.call(bool))//[object Boolean]
var num = 123;
console.log(Object.prototype.toString.call(num));//[object Number]
var nul = null;
console.log(Object.prototype.toString.call(nul));//[object Null]
var und = undefined;
console.log(Object.prototype.toString.call(und));//[object Undefined]
var oDate = new Date();
console.log(Object.prototype.toString.call(oDate));//[object Date]
var json = {};
console.log(Object.prototype.toString.call(json));//[object Object]
var arr = [];console.log(Object.prototype.toString.call(arr));//[object Array]
var reg = /a/;
console.log(Object.prototype.toString.call(reg));//[object RegExp]
var fun = function(){};
console.log(Object.prototype.toString.call(fun));//[object Function]
var error = new Error();
console.log(Object.prototype.toString.call(error));//[object Error]

从这个结果也可以看出，不管是什么类型的，Object.prototype.toString.call();都可以判断出其具体的类型。

接下来我们分析一下四种方法各自的优缺点:


四种方法的优缺点

从上表中我们看到了，instanceof和constructor不能跨iframe,上面没有细说，所以下面我们直接上例子：
例：跨页面判断是否是数组

window.onload = function(){     
  var oF = document.createElement('iframe');    document.body.appendChild( oF );        
  var ifArray = window.frames[0].Array;     
  var arr = new ifArray();      
  //alert( arr.constructor == Array );  //false     
  //alert( arr instanceof Array );  //false     
  alert( Object.prototype.toString.call(arr) == '[object Array]' );  //true     
};

从结果中可以看出，constructor和instanceof都没有正确的判断出类型，只有object.prototype.toString.call()；正确判断出了
其实面试官也经常喜欢让说一种最简单的判断是数组的方法，记住是object.prototype.toString.call() 哦！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,951评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,606评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,601评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,478评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,565评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,587评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,590评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,337评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,785评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,935评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,578评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2赞 352