JavaScript中判断对象类型的几种方法总结


Posted in Javascript onNovember 11, 2013

我们知道,JavaScript中检测对象类型的运算符有:typeof、instanceof,还有对象的constructor属性:

1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串。如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在)。 但 typeof 的能力有限,其对于Date、RegExp类型返回的都是"object"。如:

typeof {}; // "object" 
typeof []; // "object" 
typeof new Date(); // "object"

所以它只在区别对象和原始类型的时候才有用。要区一种对象类型和另一种对象类型,必须使用其他的方法。如:instanceof 运算符或对象的 constructor 属。

2)instanceof 运算符。 instanceof 运算符要求其左边的运算数是一个对象,右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例,则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例,或者 object 为 null,则返回 false。如:

[] instanceof Array; // true 
[] instanceof Object; // true 
[] instanceof RegExp; // false 
new Date instanceof Date; // true

所以,可以用instanceof运算符来判断对象是否为数组类型:

function isArray(arr){ 
  return arr instanceof Array; 
}

3)constructor 属性。 JavaScript中,每个对象都有一个constructor属性,它引用了初始化该对象的构造函数,常用于判断未知对象的类型。如给定一个求知的值 通过typeof运算符来判断它是原始的值还是对象。如果是对象,就可以使用constructor属性来判断其类型。所以判断数组的函数也可以这样写:

function isArray(arr){ 
  return typeof arr == "object" && arr.constructor == Array; 
}

很多情况下,我们可以使用instanceof运算符或对象的constructor属性来检测对象是否为数组。例如很多JavaScript框架就是使用这两种方法来判断对象是否为数组类型。 但是检测在跨框架(cross-frame)页面中的数组时,会失败。原因就是在不同框架(iframe)中创建的数组不会相互共享其prototype属性。例如:

<script>
window.onload=function(){
var iframe_arr=new window.frames[0].Array;
alert(iframe_arr instanceof Array); // false
alert(iframe_arr.constructor == Array); // false
}
</script>

在Ajaxian上看到了一种精确的检测方法,跨原型链调用toString()方法:Object.prototype.toString()。可以解决上面的跨框架问题。 当Object.prototype.toString(o)执行后,会执行以下步骤: 1)获取对象o的class属性。 2)连接字符串:"[object "+结果(1)+"]" 3)返回 结果(2) 例如:

Object.prototype.toString.call([]); // 返回 "[object Array]"
Object.prototype.toString.call(/reg/ig); // 返回 "[object RegExp]"

这样,我们就可以写一个健壮的判断对象是否为数组的函数:

function isArray(arr){
  return Object.prototype.toString.call(arr) === "[object Array]";
}

此种方法得到国外多个javaScript大师的认可,在即将发布的jQuery 1.3中将使用这种方法来检测数组。 prototype.js的一个维护者写了下面这个函数,用于获取对象的类型名

/**
 * Returns internal [[Class]] property of an object
 *
 * Ecma-262, 15.2.4.2
 * Object.prototype.toString( )
 *
 * When the toString method is called, the following steps are taken: 
 * 1. Get the [[Class]] property of this object. 
 * 2. Compute a string value by concatenating the three strings "[object ", Result (1), and "]". 
 * 3. Return Result (2).
 *
 * __getClass(5); // => "Number"
 * __getClass({}); // => "Object"
 * __getClass(/foo/); // => "RegExp"
 * __getClass(''); // => "String"
 * __getClass(true); // => "Boolean"
 * __getClass([]); // => "Array"
 * __getClass(undefined); // => "Window"
 * __getClass(Element); // => "Constructor"
 *
 */
function __getClass(object){
  return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
};

扩展一下,用于检测各种对象类型:

var is ={
  types : ["Array", "Boolean", "Date", "Number", "Object", "RegExp", "String", "Window", "HTMLDocument"]
};
for(var i = 0, c; c = is.types[i ++ ]; ){
  is[c] = (function(type){
    return function(obj){
      return Object.prototype.toString.call(obj) == "[object " + type + "]";
    }
  )(c);
}
alert(is.Array([])); // true
alert(is.Date(new Date)); // true
alert(is.RegExp(/reg/ig)); // true

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
搭建vue开发环境
Jul 19 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
json数据格式常见操作示例
Jun 13 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 #Javascript
js中关于一个分号的崩溃示例
Nov 11 #Javascript
javascript中怎么做对象的类型判断
Nov 11 #Javascript
jquery隐藏标签和显示标签的实例
Nov 11 #Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 #Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 #Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 #Javascript
You might like
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python程序变成软件的实操方法
2019/06/24 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
python的pip有什么用
2020/06/17 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
大一军训感言
2014/01/09 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
优秀公益广告词大全
2014/03/19 职场文书
捐款倡议书
2014/04/14 职场文书
天地会口号
2014/06/17 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
武侯祠导游词
2015/02/04 职场文书
创卫工作总结2015
2015/04/22 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python