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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
javascript 闭包
Sep 15 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
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
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
JS查看对象功能代码
2008/04/25 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python 5个实用的技巧
2020/09/27 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
护理专业自我鉴定
2014/01/30 职场文书
党校学习自我鉴定
2014/02/24 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
三好学生竞选稿
2015/11/21 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis