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

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

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

得到的结果如下:

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

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

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

从上表的结果可以看出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));

很显然通过这个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>

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))

{}.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>

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

(0)

相关推荐

  • isArray()函数(JavaScript中对象类型判断的几种方法)

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

  • JavaScript isArray()函数判断对象类型的种种方法

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

  • js确定对象类型方法

    1.typeof 支持基本类型的获取,比如:boolean.string.number.function.object.undefined 用法: var v = true;//"string", typeof v; //boolean PS:Array/Date/null等都是object,undefined为undefined 2.instanceof 当确定一个值是function或者object,就可以使用instanceof了解更详细情况 用法: var v = new Da

  • JavaScript使用prototype定义对象类型(转)[

    From: JavaEye.com prototype提供了一套JavaScript面向对象基础设施,我们可以使用它来进行面向对象编程,定义对象类型方式如下: var Person = Class.create();Person.prototype = { initialize : function(name, age) { this.name = name; this.age = age; }, toString : function() { document.writeln("[name]:

  • JavaScript中判断变量是数组、函数或是对象类型的方法

    数组 ECMAScript5中Array.isArray是原生的判断数组的方法,IE9及以上支持.考虑到兼容性,在没有此方法的浏览器中,可以使用 Object.prototype.toString.call(obj) === '[object Array]'替代. 复制代码 代码如下: var isArray = Array.isArray || function(obj) {     return Object.prototype.toString.call(obj) === '[object

  • json转String与String转json及判断对象类型示例代码

    复制代码 代码如下: function ajaxGetMenuList(){ $.getJSON("login.do", function(json){ var r = ""; zNodes += "["; $(json.menuList).each(function(i){ r = json.menuList[i]; if(i>0) zNodes += ","; zNodes += '{'; zNodes += 'id

  • JavaScript使用prototype定义对象类型

    From: JavaEye.com prototype提供了一套JavaScript面向对象基础设施,我们可以使用它来进行面向对象编程,定义对象类型方式如下:  var Person = Class.create(); Person.prototype = {  initialize : function(name, age) {  this.name = name;  this.age = age;  },  toString : function() {  document.writeln(

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

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

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

    在编写js程序的过程中,可能常常需要判断一个对象的类型,例如你写了一个函数,需要通过判断不同的参数类型来编写不同的代码. 首先可能会想到typeof操作符,看下面的这个例子: <script type="text/javascript"> var object = {}; var b = true; alert(typeof object + " " + typeof b); </script> 得到的结果如下: 从上面的结果可以看到,用ty

  • javascript中对象的定义、使用以及对象和原型链操作小结

    本文实例总结了javascript中对象的定义.使用以及对象和原型链操作.分享给大家供大家参考,具体如下: 1. 除了5种基本类型外,JS中剩下的就是对象 (1)对象的定义: 直接定义: var test={x:1,y:1} new方式创建: var test=new Object({x:1}) Object.create方式: var test=Object.create({x:1}) (2)对象上的赋值与取值 举例: var test={ x:1, y:2 } 方法一:可以通过test['x

  • 判断JavaScript中的两个变量是否相等的操作符

    1.为什么要判断? 可能有些同学看到这个标题就会产生疑惑,为什么我们要判断JavaScript中的两个变量是否相等,JavaScript不是已经提供了双等号"=="以及三等号"==="给我们使用了吗? 其实,JavaScript虽然给我们提供了相等运算符,但是还是存在一些缺陷,这些缺陷不符合我们的思维习惯,有可能在使用的时候得到一些意外的结果.为了避免这种情况的出现,我们需要自己函数来实现JavaScript变量之间的对比. 2.JavaScript等号运算符存在哪

  • JavaScript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascript中的对象是基于原型的. 1.1句点运算符创建 javascript中的对象实际上就是一个由属性组成的关联数组,属性由名称和值组成,值的类型可以是任何数据类型,或者函数和其他对象. 创建一个简单对象: var foo = {}; foo.prop_1 = 'bar'; foo.prop_2 =

  • JavaScript中对象property的读取和写入方法介绍

    JavaScript中,可以通过点号操作符"."或者中括号操作符"[]"来对对象的property进行读取和写入: 复制代码 代码如下: var o = {x:1, y:2}; console.log(o.x);//1 console.log(o["y"]);//2 o.y = 7; console.log(o["y"]);//7 值得注意的是,如果使用中括号操作符,则操作符内的值类型必须是string,或者能够转换成stri

  • 详解javaScript中Number数字类型的使用

    目录 前言 Number数字 自带属性值 基础使用 总结 源码地址 前言 Number和Math都属于JavaScript中的内置对象,Number数字类型作为基础数据类型,我们在开发过程中会经常用到,包括数字精度的格式化,还有字符串转换成数字等操作. Number数字 自带属性值 Number.EPSILON 两个可表示(representable)数之间的最小间隔. Number.MAX_SAFE_INTEGER JavaScript 中最大的安全整数 (2^53 - 1). Number.

  • 深入浅析JavaScript中的Function类型

    Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va

  • javascript中对Date类型的常用操作小结

    javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD

  • javascript中对变量类型的判断方法

    在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Function, Date等等.今天我们就来探讨一下,使用什么方法判断一个出一个变量的类型. 在讲解各种方法之前,我们首先定义出几个测试变量,看看后面的方法究竟能把变量的类型解析成什么样子,以下几个变量差不多包含了我们在实际编码中常用的类型. var

随机推荐