JS四种判断数据类型的方法:typeof、instanceof、constructor、Object.prototype.toString.call()
1.typeof
1 console.log(typeof ""); //string
2 console.log(typeof 1); //number
3 console.log(typeof true); //boolean
4 console.log(typeof null); //object
5 console.log(typeof undefined); //undefined
6 console.log(typeof []); //object
7 console.log(typeof function(){}); //function
8 console.log(typeof {}); //object
控制台输出结果:

typeof对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用的。
2.instanceof
1 console.log("1" instanceof String);
2 console.log(1 instanceof Number);
3 console.log(true instanceof Boolean);
4 // console.log(null instanceof Null);
5 // console.log(undefined instanceof Undefined);
6 console.log([] instanceof Array);
7 console.log(function(){} instanceof Function);
8 console.log({} instanceof Object);
暂且不考虑null和undefined(这两个比较特殊),控制台输出结果:

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

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

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

尤其是null,其实这是js设计的一个败笔,早期准备更改null的类型为null,由于当时已经有大量网站使用了null,如果更改,将导致很多网站的逻辑出现漏洞问题,就没有更改过来,于是一直遗留到现在。作为学习者,我们只需要记住就好。
3.constructor
1 console.log(("1").constructor === String);
2 console.log((1).constructor === Number);
3 console.log((true).constructor === Boolean);
4 //console.log((null).constructor === Null);
5 //console.log((undefined).constructor === Undefined);
6 console.log(([]).constructor === Array);
7 console.log((function() {}).constructor === Function);
8 console.log(({}).constructor === Object);

(这里依然抛开null和undefined)乍一看,constructor似乎完全可以应对基本数据类型和引用数据类型,都能检测出数据类型,事实上并不是如此,来看看为什么:
1 function Fn(){};
2
3 Fn.prototype=new Array();
4
5 var f=new Fn();
6
7 console.log(f.constructor===Fn);
8 console.log(f.constructor===Array);

我声明了一个构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。
看到这里,是不是觉得绝望了。没关系,终极解决办法就是第四种办法,看过jQuery源码的人都知道,jQuery实际上就是采用这个方法进行数据类型检测的。
4.Object.prototype.toString.call()
1 var a = Object.prototype.toString;
2
3 console.log(a.call("aaa"));
4 console.log(a.call(1));
5 console.log(a.call(true));
6 console.log(a.call(null));
7 console.log(a.call(undefined));
8 console.log(a.call([]));
9 console.log(a.call(function() {}));
10 console.log(a.call({}));

参考博客:https://www.cnblogs.com/xuniannian/p/7452086.html
参考博客:https://www.cnblogs.com/zt123123/p/7623409.html
JS四种判断数据类型的方法:typeof、instanceof、constructor、Object.prototype.toString.call()的更多相关文章
- instanceof constructor Object.prototype.tostring.call ( [] )区别 数组和 对象的3中方法
- js中准确判断数据类型的方法
一 通用的typeof 方法 typeof ture 输出 Boolean typeof 123 输出 number ..... 但是 typeof 无法判断 nu ...
- JS基础-数据类型判断typeof、instanceof、Object.prototype.toString
typeof用在基本数据类型和函数时,返回其对应类型的描述,对于引用类型都返回为object. instanceof无法判断基本数据类型,对于引用类型数据,返回其其对应类型. Object.proto ...
- js中判断数据类型的方法 typeof
<input type="text" onblur="demo(this)"/><br/> <input type="n ...
- 浏览器解析js和type判断数据类型
### 浏览器解析: - 1.当浏览器(内核.引擎)解析和渲染js的时候,会给js提供一个运行的环境,这个环境叫做“全局作用域(后端global / 客服端window scope)” - 2.代码自 ...
- js 判断数据类型的方法及实现
转载自 http://blog.csdn.net/xujiaxuliang/archive/2009/10/21/4708353.aspx null 与 undefined 区别: null 是js的 ...
- js的深入学习课程Object.prototype.toString.call()
1.通过 Object.prototype.toString.call() 进行类型判断 function isArray(obj) { return Object.prototype.toStrin ...
- JS中的数据类型及判断数据类型的方法
简单类型(基本类型): number,string,boolean,null,undefined 复杂类型(引用类型):object typeof 只能判断基本数据类型 instanceof 能够判断 ...
- javascript四种类型识别的方法
× 目录 [1]typeof [2]instanceof [3]constructor[4]toString 前面的话 javascript有复杂的类型系统,类型识别则是基本的功能.javascrip ...
随机推荐
- Robot Framework自动化测试环境搭建
robotFramework是一个通用的自动化测试框架来进行验收测试和验收测试驱动开发模式,它具有易于使用的表格的测试数据和关键字测试驱动方法,其测试功能可通过实现与python或java的测试库进行 ...
- ndk编译出来的executable动态库入口函数的参数错乱
早些时间用ndk编译带main入口函数的动态库,测试可运行.今天要作它用时,发现在这个入口函数并没有传入正确的参数. hello.cpp有main函数,用ndk分别编译成可执行文件和动态库文件,使两者 ...
- ZeroC ICE的远程调用框架
想搞清楚slice为我们生成了什么样的框架代码,就先搞明白Ice的远程调用框架暗中为我们做了些什么? Ice将Ice Object的方法调用分为三个阶段(或步骤),分别是begin,process和e ...
- docker实例之mysql的使用
docker实例之mysql的使用 常用步骤 命令 1:搜索镜像 docker search xxx 2:拉取镜像 docker pull xxx:yy 3:查看镜像 docker image ins ...
- [转载] Docker 实现原理
目录 Namespaces 进程 网络 libnetwork 挂载点 chroot CGroups UnionFS 存储驱动 AUFS 其他存储驱动 总结 原文链接:https://dravenes ...
- Protues7.8仿真软件有中文路径无法正常运行怎么办?
Protues7.8是一款功能强大的单片机仿真软件,在我们的学习生活中经常会用的到,在装软件时明明已经装好了,却不能报错跳出两行红字,让人心痛. 一般都是因为账户名字是中文的问题,这个软件对中文不兼容 ...
- day01_爬虫和数据
1.什么是爬虫 1.1.爬虫的定义 脚本,程序--->自动抓取万维网上信息的程序. 1.2.爬虫的分类 2.1.通用爬虫 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google ...
- scrapy下载中间件结合selenium抓取全国空气质量检测数据
1.所需知识补充 1.下载中间件常用函数 process_request(self, request, spider): 当每个request通过下载中间件是,该方法被调用 process_reque ...
- 【Android - 控件】之MD - RecyclerView的使用
RecyclerView是Android 5.0新特性——Material Design中的一个控件,它将ListView.GridView整合到一起,可以使用极少的代码在ListView.GridV ...
- xmake从入门到精通8:切换编译模式
xmake是一个基于Lua的轻量级现代化c/c++的项目构建工具,主要特点是:语法简单易上手,提供更加可读的项目维护,实现跨平台行为一致的构建体验. 本文我们会详细介绍下如何在项目构建过程中切换deb ...