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拖放插件集合
Apr 09 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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
php生成随机数或者字符串的代码
2008/09/05 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
php图片添加水印例子
2016/07/20 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
js获取事件源及触发该事件的对象
2013/10/24 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
Python入门篇之面向对象
2014/10/20 Python
Python实现的彩票机选器实例
2015/06/17 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python3.5的包存放的具体路径
2020/08/16 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
2015年安全员工作总结范文
2015/04/22 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL