jQuery.type方法是检测数据类型的工具方法,在分析其用法之前先总结下js给我们提供了那些监测数据类型的方法;

一、typeof 操作符


下面是测试代码

var data=[],a='123',b=0,c=true,d={1:23},e=[123],f=function(){},g=null,h=undefined,i=Math,j=/$.+^/,k= new Date();
data.push(a,b,c,d,e,f,g,h,i,j,k); for(var key=0;key<data.length;key++){
console.log(data[key]+'的数据类型是'+typeof data[key]);
}

在上面的代码中我尽量列举了js不同的数据类型和对象,执行结果如下:

//123的数据类型是string

// 0的数据类型是number

// true的数据类型是boolean

//[object Object]的数据类型是object

//123的数据类型是object

// function (){}的数据类型是function

//undefined的数据类型是undefined

// [object Math]的数据类型是object

// /$.+^/的数据类型是object

// Wed Jul 22 2015 15:47:25 GMT+0800 (中国标准时间)的数据类型是object

我们可以看到typeof能检测到js的6大基本类型中的5个,即String,Boolean,Number,Undefined,Object  其中null被归为了Object把Function单独拿了出来,基本上还是能完成任务的,但那是对于复合类型而言就无法进一步区分了,比如到底是数组还是对象呢?这个时候就可以利用另外一个操作符instanceOf了

二、instanceOf操作符

同样的写一段测试代码

var data=[],a='123',b=0,c=true,d={1:23},e=[123],f=function(){},g=null,h=undefined,i=Math,j=/$.+^/,k= new Date();
data.push(a,b,c,d,e,f,g,h,i,j,k);
console.log(a instanceof String);
console.log(b instanceof Number);
console.log(c instanceof Boolean);
console.log(d instanceof Object);
console.log(e instanceof Array);
console.log(f instanceof Function);
console.log(j instanceof RegExp);
console.log(k instanceof Date);

在浏览器中的运行结果如下:

// false
// false
// true
// true
// true
// true
// true

可以看到只有复合类型的结果为真,而且必须保证类型是一一对应的,显然这个方法只能做个一检验方法存在,并不能在我们不知道具体数据类型的时候去做判断,可以作为typeof的一个辅助测试手段

三、constructor属性

同样的先写下测试代码

var data=[],a='123',b=0,c=true,d={1:23},e=[123],f=function(){},g=null,h=undefined,i=Math,j=/$.+^/,k= new Date();
data.push(a,b,c,d,e,f,g,h,i,j,k);
for(var key=0;key<data.length;key++){
try{
console.log(data[key]+'的检测结果是' +data[key].constructor);
}catch(e){ }
}

运行结果如下:

//123的检测结果是function String() { [native code] }

//0的检测结果是function Number() { [native code] }

//true的检测结果是function Boolean() { [native code] }

//[object Object]的检测结果是function Object() { [native code] }

//123的检测结果是function Array() { [native code] }

//function (){}的检测结果是function Function() { [native code] }

//[object Math]的检测结果是function Object() { [native code] }

///$.+^/的检测结果是function RegExp() { [native code] }
//Wed Jul 22 2015 16:23:41 GMT+0800 (中国标准时间)的检测结果是function Date() { [native code] }

其中null调用是会报错所以加了try语句,相对而言此方法能够很方便的获取其构造函数,这样就能判断了,遗憾的是该属性并非是只读属性是可以被修改的,一旦被修改或者涉及到对象继承等问题时会导致不准而且在遇到某些值得时候会报错导致程序无法运行比如null,还有没有其他方法呢?

四、Object.prototype.toString方法

该方法通过调用待测试数据的toString方法来获得其构造函数的字符串表示,测试代码如下:

    var data=[],a='123',b=0,c=true,d={1:23},e=[123],f=function(){},g=null,h=undefined,i=Math,j=/$.+^/,k= new Date();
data.push(a,b,c,d,e,f,g,h,i,j,k);
for(var key=0;key<data.length;key++){
console.log(data[key]+'的检测结果是' +Object.prototype.toString.call(data[key]));
}

运行结果如下:

//123的检测结果是[object String]

//0的检测结果是[object Number]

//true的检测结果是[object Boolean]

//[object Object]的检测结果是[object Object]

//123的检测结果是[object Array]

//function (){}的检测结果是[object Function]

//null的检测结果是[object Null]

//undefined的检测结果是[object Undefined]

//[object Math]的检测结果是[object Math]

///$.+^/的检测结果是[object RegExp]

//Wed Jul 22 2015 16:33:05 GMT+0800 (中国标准时间)的检/测结果是[object Date]

看到结果是不是感觉很爽!不仅可以检测到所有数据类型,而且把Object子类型也现实了出来,也不用担心报错,之所以能实现是因为所有的对象都是基于Object而来的,其实jQery也是采取的这个方法,只不过是做了进一步处理让我们看着更爽而已!

看看使用jQuery.type的结果

    var data=[],a='123',b=0,c=true,d={1:23},e=[123],f=function(){},g=null,h=undefined,i=Math,j=/$.+^/,k= new Date();
data.push(a,b,c,d,e,f,g,h,i,j,k);
for(var key=0;key<data.length;key++){
console.log(data[key]+'的检测结果是' +$.type(data[key]));
}

运行结果:

//123的检测结果是string

//0的检测结果是number

//的检测结果是boolean

//[object Object]的检测结果是object

//123的检测结果是array

//function (){}的检测结果是function

//null的检测结果是null

//undefined的检测结果是undefined

//[object Math]的检测结果是object

///$.+^/的检测结果是regexp

//Wed Jul 22 2015 16:44:25 GMT+0800 (中国标准时间)的检测结果是date

ok,结果无可挑剔了,下面附上源码:

type: function( obj ) {
return obj == null ?
String( obj ) :
class2type[ toString.call(obj) ] || "object";
},

如果是undefined或者是null他们的数据累类型就是自己,直接返回字符串形式,如果是其他数据就执行toString方法,该方法在之前有介绍

toString = Object.prototype.toString,

返回的结果就像之前测试过的结果类似  [object Date]这样的 如果不能取到就返回object,结果作class2type的键,下面来看下class2type的定义:

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

好了type方法分析完毕。

jQuery静态方法type使用和源码分析的更多相关文章

  1. jQuery静态方法globalEval使用和源码分析

    Eval函数大家都很熟悉,但是globalEval方法却很少使用,大多数参考手册也没有相关api,下面就对其用法和源码相应介绍: jQuery.globalEval()函数用于全局性地执行一段Java ...

  2. jQuery静态方法parseXML使用和源码分析

    jQuery.parseXML( data ) 接受一个格式良好的 XML 字符串,返回解析后的 XML 文档. 方法 jQuery.parseXML() 使用浏览器原生的 XML 解析函数实现. 在 ...

  3. jQuery静态方法isPlainObject,isEmptyObject方法使用和源码分析

    isPlainObject方法 测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的) 示例: //测试是否为纯粹的对象 jQuer ...

  4. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

  5. Quartz学习--二 Hello Quartz! 和源码分析

    Quartz学习--二  Hello Quartz! 和源码分析 三.  Hello Quartz! 我会跟着 第一章 6.2 的图来 进行同步代码编写 简单入门示例: 创建一个新的java普通工程 ...

  6. Kubernetes Job Controller 原理和源码分析(一)

    概述什么是 JobJob 入门示例Job 的 specPod Template并发问题其他属性 概述 Job 是主要的 Kubernetes 原生 Workload 资源之一,是在 Kubernete ...

  7. Kubernetes Job Controller 原理和源码分析(三)

    概述Job controller 的启动processNextWorkItem()核心调谐逻辑入口 - syncJob()Pod 数量管理 - manageJob()小结 概述 源码版本:kubern ...

  8. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  9. Android Debuggerd 简要介绍和源码分析(转载)

    转载: http://dylangao.com/2014/05/16/android-debuggerd-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D%E5%92%8C%E ...

随机推荐

  1. 《BI那点儿事》数据挖掘各类算法——准确性验证

    准确性验证示例1:——基于三国志11数据库 数据准备: 挖掘模型:依次为:Naive Bayes 算法.聚类分析算法.决策树算法.神经网络算法.逻辑回归算法.关联算法提升图: 依次排名为: 1. 神经 ...

  2. SQL*Loader之CASE11

    CASE11 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase11.sql set termout off rem host write sys$output &q ...

  3. easyui-datagrid行数据field原样输出html标签

    easyui-datagrid 绑定的行 field 原样输出html标签.处理效果如图: Html页面代码如下: ... <tr> <th field="id" ...

  4. DA - 信息获取途径汇总

    目的驱动 大多数情况下,都是为了解决某个问题或完成某项任务,才需要进行针对性的.大范围的.细致化的信息获取. 那么,信息获取的方式和来源,就应该紧紧围绕这个"问题和任务"本身来确定 ...

  5. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  6. Hadoop阅读笔记(三)——深入MapReduce排序和单表连接

    继上篇了解了使用MapReduce计算平均数以及去重后,我们再来一探MapReduce在排序以及单表关联上的处理方法.在MapReduce系列的第一篇就有说过,MapReduce不仅是一种分布式的计算 ...

  7. MAPPING SEGMENTS TO PAGES

    The segmentation and paging mechanisms provide in the support a wide variety of approaches to memory ...

  8. JAVA 设计模式 访问者模式

    用途 访问者模式 (Visitor) 表示一个作用于某对象结构中的各元素的操作. 它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作. 访问者模式是一种行为型模式. 用途

  9. qml基础学习 基础概念

    一.概括 学习qt已有2年多的时间,从qt4.7开始使用直到现在正在使用的qt5.6,基本都在windows机器上做开发.最近有意向看了下qt的qml部分,觉着还是挺不错的,毕竟可以做嵌入式移动端产品 ...

  10. Clipboard.js实现复制内容到剪切板

    <script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1. ...