javascript中怎么做对象的类型判断


Posted in Javascript onNovember 11, 2013

最近在翻看John Resig的大作《Pro JavaScript Techniques》,里面讲到了如何做javascript的类型判断的问题。文中介绍了两种方式,一种是使用typeof,另一种是使用constructor。略感遗憾的是作为jquery的作者,他尽然没有介绍jquery使用的类型判断方式。不过没有关系,我在这里给大家一起总结下。

在这里我首先像大家推荐一个很好用的在线编辑器:http://jsfiddle.net/。他提供了jquery、mootools、prototype和YUI三个主流js框架的各个版本,当你需要编写简单的js测试程序的时候可以直接使用它。省去了打开编辑软件,创建各种类型文件的步骤。编辑代码之后,点击[Run]按钮,一切搞定。

javascript中怎么做对象的类型判断

1.typeof

typeof是我们在做类型判断时最常用的方法,他的优点就是简单、好记,缺点是不能很好的判断object、null、array、regexp和自定义对象。

下面是我的测试代码:

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');
console.log(typeof str);
console.log(typeof arr);
console.log(typeof num);
console.log(typeof bool);
console.log(typeof obj);
console.log(typeof nullObj);
console.log(typeof undefinedObj);
console.log(typeof reg);
console.log(typeof fn);
console.log(typeof user);

代码运行结果:

javascript中怎么做对象的类型判断

2.constructor

现在介绍一种不常使用的方法,对象构造器constructor。他的优点是支持大部分对象类型的判断,特别是对自定义对象的判断;缺点是不能在null和undefined上使用。

测试代码和之前的差不多,区别就是使用XXX.constructor代替了typeof。

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');
console.log(str.constructor);
console.log(arr.constructor);
console.log(num.constructor);
console.log(bool.constructor);
console.log(obj.constructor);
console.log(reg.constructor);
console.log(fn.constructor);
console.log(user.constructor);
console.log(nullObj.constructor);
console.log(undefinedObj.constructor);
运行结果:

javascript中怎么做对象的类型判断

运行到 console.log(nullObj.constructor); 的时候,浏览器报错:Uncaught TypeError: Cannot read property 'constructor' of null。类似的问题也发生在console.log(undefinedObj.constructor); 上面:Uncaught TypeError: Cannot read property 'constructor' of undefined。

3.Object.prototype.toString.call()

最后要介绍的是jquery中使用的方式,Object.prototype.toString.call()。优点是支持绝大多数类型的判断,唯一的缺点是不支持自定义对象的判断。

测试代码如下:

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');
var toString=Object.prototype.toString;
console.log(toString.call(str));
console.log(toString.call(arr));
console.log(toString.call(num));
console.log(toString.call(bool));
console.log(toString.call(obj));
console.log(toString.call(reg));
console.log(toString.call(fn));
console.log(toString.call(user));
console.log(toString.call(nullObj));
console.log(toString.call(undefinedObj));
运行结果:

javascript中怎么做对象的类型判断

console.log(toString.call(user)); 的返回结果为:[object Object],不能做进一步判断。

总结

javascript中经常使用的对象判断方式包括:typeof、constructor和Object.prototype.toString.call()。其中typeof很好理解,他是JavaScript本身支持的语法。constructor很少使用,但是相信大家通过demo也能看懂他代表的意思。至于Object.prototype.toString.call()可能多少会让人有点费解,他和XXX.toString()有什么区别呢,为什么不能直接使用XXX.toString()呢?

我们在浏览器中运行下面的代码:查看运行结果:

javascript中怎么做对象的类型判断

null和undefined因为不存在toString()方法,所以会报错,我们就不去管他们了。至于其他对象,通过toString()返回的内容和使用Object.prototype.toString.call()返回的内容差别很大。这是因为Object.prototype.toString()方法被设计用来返回对象类型的。String、Array、Boolean、Regexp、Number和Function都继承自Object,同时也就继承了Object的原型方法toString(),但是他们都对toString()进行了重写。执行xxx.toString()时使用的是重写后的方法,返回的结果自然会和Object.prototype.toString.call()的结果不一致。

通过上面的例子,大家一定对这三种方式有了更深刻的认识,熟悉他们的优缺点,然后可以根据自己的需要选择合适的方式。推荐使用Object.prototype.toString.call()方法,因为他能解决绝大部分情况的判断,在遇到返回值为[object Object]时,再使用constructor辅助判断,看是否是自定义对象。

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');
console.log(str.toString());
console.log(arr.toString());
console.log(num.toString());
console.log(bool.toString());
console.log(obj.toString());
console.log(reg.toString());
console.log(fn.toString());
console.log(user.toString());
console.log(nullObj.toString());
console.log(undefinedObj.toString());
Javascript 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
this和执行上下文实现代码
Jul 01 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 #Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 #Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 #Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 #Javascript
javascript内存管理详细解析
Nov 11 #Javascript
PHP abstract与interface之间的区别
Nov 11 #Javascript
js 一个关于图片onload加载的事
Nov 10 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP初学者头疼问题总结
2006/07/08 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
如何用Python绘制3D柱形图
2020/09/16 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
python 调用js的四种方式
2021/04/11 Python
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers