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 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
移动端js图片查看器
Nov 17 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
详解用webpack2搭建angular2的项目
Jun 22 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
vue filters的使用详解
2018/06/11 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python用插值法绘制平滑曲线
2021/02/19 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
三好学生自我鉴定
2013/12/17 职场文书
主管会计岗位责任制
2014/02/10 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
校园安全教育广播稿
2014/02/17 职场文书
美术毕业生求职信
2014/02/25 职场文书
《王二小》教学反思
2014/02/27 职场文书
团代会宣传工作方案
2014/05/08 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
出纳岗位职责范本
2015/03/31 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
JavaScript函数柯里化
2021/11/07 Javascript
Python Pygame实战之塔防游戏的实现
2022/03/17 Python