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控制表格隔行变色
Jun 26 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
基于Python实现用户管理系统
2019/02/26 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
同事打架检讨书
2014/02/04 职场文书
小学老师寄语大全
2014/04/04 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
未婚证明格式
2015/06/15 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript