jQuery静态方法type使用和源码分析
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使用和源码分析的更多相关文章
- jQuery静态方法globalEval使用和源码分析
Eval函数大家都很熟悉,但是globalEval方法却很少使用,大多数参考手册也没有相关api,下面就对其用法和源码相应介绍: jQuery.globalEval()函数用于全局性地执行一段Java ...
- jQuery静态方法parseXML使用和源码分析
jQuery.parseXML( data ) 接受一个格式良好的 XML 字符串,返回解析后的 XML 文档. 方法 jQuery.parseXML() 使用浏览器原生的 XML 解析函数实现. 在 ...
- jQuery静态方法isPlainObject,isEmptyObject方法使用和源码分析
isPlainObject方法 测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的) 示例: //测试是否为纯粹的对象 jQuer ...
- jQuery 2.0.3 源码分析Sizzle引擎解析原理
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...
- Quartz学习--二 Hello Quartz! 和源码分析
Quartz学习--二 Hello Quartz! 和源码分析 三. Hello Quartz! 我会跟着 第一章 6.2 的图来 进行同步代码编写 简单入门示例: 创建一个新的java普通工程 ...
- Kubernetes Job Controller 原理和源码分析(一)
概述什么是 JobJob 入门示例Job 的 specPod Template并发问题其他属性 概述 Job 是主要的 Kubernetes 原生 Workload 资源之一,是在 Kubernete ...
- Kubernetes Job Controller 原理和源码分析(三)
概述Job controller 的启动processNextWorkItem()核心调谐逻辑入口 - syncJob()Pod 数量管理 - manageJob()小结 概述 源码版本:kubern ...
- 分享7款非常实用的jQuery/CSS3插件演示和源码
上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...
- 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 ...
随机推荐
- bootstrap-datetimepicker.js学习
之前项目运用到了这个时间控件,期间bug还是一些.抽个时间,简单地看一下. 先看一下datetimepicker.js的结构 var DateTimePicker = function(element ...
- 使用git提交中删除idea
https://segmentfault.com/q/1010000000720031 http://www.tuicool.com/articles/a6Nf63F 先有项目,然后分享至github ...
- JAVA 设计模式 状态模式
用途 状态模式 (State) 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式是一种行为型模式. 结构
- 自定义视图引擎,实现MVC主题快速切换
一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定 ...
- JS魔法堂: Native Promise Only源码剖析
一, 前言 深入学习Promise的朋友应该都看过<深入理解Promise五部曲>这一系列的文章, 以解除回调地狱之外的观点来剖析Promise更多的内涵,确实十分精彩. Part 1: ...
- 大话immutable.js
为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutabl ...
- ASP.NET MVC图片管理(删除)
上星期有写了一篇<ASP.NET MVC图片管理(上传,预览与显示)>http://www.cnblogs.com/insus/p/4620420.html 它只实现了上传功能,即时预览以 ...
- ASP.NET MVC文章附加有源码下载的文章
很多一段时间以来,Insus.NET有分享很多有关ASP.NET MVC的文章,每隔一段时间,会把源码以及数据库分享供大家下载. 你可以按时间排序,文章越新,源码以及数据数据也就越新. 你可以从下面的 ...
- PHP条件语句语法与示例
一.if…else语句 语法: 1 if(条件){ …… } else{ …… } 2 if(条件){ …… } elseif(条件){ …… } else{ …… } 示例1: <?php & ...
- grep命令的使用
grep是UNIX和LINUX中使用最广泛的命令之一.grep允许对文本文件进行模式查找.如果找到匹配模式, grep打印包含模式的所有行.grep支持基本正则表达式,也支持其扩展集.grep有三种变 ...