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 EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
javascript操作ul中li的方法
May 14 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 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水印
2007/03/16 PHP
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
多版本Python共存的配置方法
2017/05/22 Python
python删除不需要的python文件方法
2018/04/24 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python3常见函数range()用法详解
2019/12/30 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
一道SQL面试题
2012/12/31 面试题
企业安全生产责任书
2014/04/14 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
教师节领导致辞
2015/07/29 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android