举例讲解如何判断JavaScript中对象的类型


Posted in Javascript onApril 22, 2016

在编写js程序的过程中,可能常常需要判断一个对象的类型,例如你写了一个函数,需要通过判断不同的参数类型来编写不同的代码。
首先可能会想到typeof操作符,看下面的这个例子:

<script type="text/javascript"> 
var object = {}; 
var b = true; 
alert(typeof object + " " + typeof b); 
 </script>

得到的结果如下:

举例讲解如何判断JavaScript中对象的类型

从上面的结果可以看到,用typeof操作符可以显示对象的类型,那么typeof操作符作用域null和undefined的结果会是什么呢?

/*var object = {}; 
var b = true; 
alert(typeof object + " " + typeof b);*/ 
alert(typeof null + " " + typeof undefined)

举例讲解如何判断JavaScript中对象的类型

typeof 操作符作用于null居然显示”object“(这个好像不科学,我还以为会显示”null'“),作用于undefined显示”undefined“(这个符合我们希望的结果),所以当用typeof操作符来判断一个对象的类型时,特别要小心,因为这个对象有可能是null。上面只是给了一部分typeof作用于这些对象的结果,下面的表列出了typeof操作符作用于Boolean, Number, String, Array, Date, RegExp, Object, Function, null, undefined的结果(有兴趣的读者可以自行测试):

举例讲解如何判断JavaScript中对象的类型

从上表的结果可以看出Array, Date, RegExp显示的都是object,为什么不是直接的显示对象的类型呢?这就要引出js的另外一个操作符了:instanceof操作符,这个操作符用来判断一个对象是否为某种类型的对象,计算的值为true或者false。先来看下:

var now = new Date(); 
var pattern = /^[\s\S]*$/; 
var names = ['zq', 'john']; 
alert((now instanceof Date) + " " 
 + (pattern instanceof RegExp) + " " + (names instanceof Array));

举例讲解如何判断JavaScript中对象的类型

很显然通过这个instanceof是能判断对象的类型的,但是这个只能判断除了基本类型(包含String类型)的其它类型,他是不能判断基本类型的。但是instanceof不是总是能正常判断的,考虑一个框架的情形,要判断其类型的对象是另外一个frame传递过来的对象,首先来看下下面的例子。
main.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <title>Main</title> 
 </head> 
 <frameset cols="45%,*"> 
  <frame name="frame1" src="frame1.html"/> 
  <frame name="frame2" src="frame2.html"/> 
 </frameset> 
</html>

frame1.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>frame1</title> 
 </head> 
 <script type="text/javascript"> 
 var names = ['riccio zhang', 'zq', 'john']; 
 </script> 
 <body style="background: #ccc"> 
 
 </body> 
</html>

frame2.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>frame2</title> 
 <script type="text/javascript"> 
 document.write("top.frame1.names instanceof Array:" 
  + (top.frame1.names instanceof Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.names instanceof top.frame1.Array:" 
  + (top.frame1.names instanceof top.frame1.Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.Array === top.frame2.Array?" + (top.frame1.Array === top.frame2.Array)); 
 </script> 
 </head> 
 <body style="background: #747474"> 
 
 </body> 
</html>

举例讲解如何判断JavaScript中对象的类型

names对象是在frame1框架中的,此时是通过frame1框架的Array来创建的,如果把names对象拿到frame2中的Array作比较,很显然names不是frame2中的Array的实例,以为frame1和frame2压根就不是同一和Array,从第2个现实结果可以很明显的看出names是他本身所在的frame的实例,从第3个输出可以看出frame1的Array和frame2的Array是不同的。那么遇到上面这种跨frame的比较该怎么办呢?我们总不能每次都拿框架对应的Array来做比较吧,有一种必须的办法可以解决上面的问题,看下面的代码:

var toString = {}.toString; 
var now = new Date(); 
alert(toString.call(now))

举例讲解如何判断JavaScript中对象的类型

{}.toString表示获取Object对象上的toString方法(这个方法时Object对象的基本方法之一),toString.call(now)表示调用toString方法。调用Date对象最原生的toString()(这个方法是Object上面的方法)方法可以显示[object Date]类型的字符串,假如是Array,则会产生[object Array]的字样,也就是说进行上面的操作会显示类似[object Class]的字样,那么我们只要判断这个字符串不就可以知道其类型了吗?由此可以写出如下的工具类:
tools.js

var tools = (function(undefined){ 
 var class2type = {}, 
  toString = {}.toString; 
  
 var fun = { 
  type: function (obj){ 
   return obj === null || obj === undefined ? 
      String(obj) : class2type[toString.call(obj)] 
  }, 
  isArray: function (obj){ 
   return fun.type(obj) === "array"; 
  }, 
  isFunction: function (obj){ 
   return fun.type(obj) === "function"; 
  }, 
  each: function (arr, callback){ 
   var i = 0, 
    hasLength = arr.length ? true : false; 
   if(!callback || (typeof callback !== 'function') || !hasLength){ 
    return; 
   } 
   for(i = 0; i< arr.length; i++){ 
    if(callback.call(arr[i], i, arr[i]) === false){ 
      break; 
    } 
   } 
  } 
 }; 
 fun.each("Boolean Number String Array Date RegExp Object Function".split(" "), function(i, name){ 
  class2type["[object "+ name +"]"] = name.toLowerCase(); 
 }); 
 return fun; 
})();

tools提供了type,isArray,isFunction等方法用来判断对象的类型,根据实际的需要可以自己添加需要判断类型的方法。type接受一个obj参数,它将对象的实际类型以小写的形式返回,比如你的需要判断对象的类型是Array,那么此方法将会返回array.
根据上面提供的工具类,再重新改写上面的例子:
fram2.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>frame2</title> 
 <script type="text/javascript" src="tools.js"></script> 
 <script type="text/javascript"> 
 document.write("top.frame1.names instanceof Array:" 
  + (top.frame1.names instanceof Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.names instanceof top.frame1.Array:" 
  + (top.frame1.names instanceof top.frame1.Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.Array === top.frame2.Array?" + (top.frame1.Array === top.frame2.Array)); 
 document.write("<br/>"); 
 document.write("tools.isArray(top.frame1.names)?" + tools.isArray(top.frame1.names)); 
 </script> 
 </head> 
 <body style="background: #747474"> 
 
 </body> 
</html>

举例讲解如何判断JavaScript中对象的类型

至此通过上面的根据类就可以很容易的判断对象的类型了。
注意:在IE中例如像alert这样的元素是不能判断的。

Javascript 相关文章推荐
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
详解JavaScript数据类型和判断方法
Sep 04 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 #Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 #Javascript
jQuery 监控键盘一段时间没输入
Apr 22 #Javascript
基于jquery实现轮播特效
Apr 22 #Javascript
jquery插件Jplayer使用方法简析
Apr 22 #Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 #Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 #Javascript
You might like
php的dl函数用法实例
2014/11/06 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
php表单处理操作
2017/11/16 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
jQuery的一些注意
2006/12/06 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2019银行竞聘书
2019/06/21 职场文书