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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
js实现模拟购物商城案例
May 18 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
php error_log 函数的使用
2009/04/13 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python中asyncore的用法实例
2014/09/29 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
遗传算法之Python实现代码
2017/10/10 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python调用百度语音识别api
2018/08/30 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python字典的遍历3种方法详解
2019/08/10 Python
python中eval与int的区别浅析
2019/08/11 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
简历里的自我评价
2014/01/31 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
幼儿园中班个人总结
2015/02/28 职场文书