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 相关文章推荐
js 动态修改css文件的方法
Aug 05 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 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
深入了解php4(1)--回到未来
2006/10/09 PHP
xajax写的留言本
2006/11/25 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
Linux中为php配置伪静态
2014/12/17 PHP
10款实用的PHP开源工具
2015/10/23 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python ChainMap的使用和说明详解
2019/06/11 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python验证码截取识别代码实例
2020/05/16 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
高中生学期学习自我评价
2014/02/24 职场文书
体育专业自荐书
2014/05/29 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python