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 获取链接(url)参数的方法
Feb 15 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
详解jQuery中的事件
Dec 14 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
js实现图片放大展示效果
Aug 30 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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中一个完整表单处理实现代码
2011/11/10 PHP
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
跟老齐学Python之编写类之二方法
2014/10/11 Python
python实现发送邮件功能代码
2017/12/14 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
pandas.cut具体使用总结
2019/06/24 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
Android笔试题总结
2014/11/29 面试题
Python文件操作的面试题
2013/06/22 面试题
庆八一活动方案
2014/01/25 职场文书
中等生评语大全
2014/05/04 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
运动会稿件100字
2014/09/24 职场文书
求职信格式范文
2015/03/19 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
python爬虫selenium模块详解
2021/03/30 Python
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python