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 ...
随机推荐
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- 自制Https证书并在Spring Boot和Nginx中使用
白话Https一文中, 介绍了Https存在的目的和工作原理,但多是偏向于原理性的介绍,本文介绍如何一步一步自制一个能够通过浏览器认证的Https证书,并讲解在Spring Boot环境和Nginx环 ...
- $.when(deferreds)
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 1 引子 上一篇博文中介绍的Deferred,它表示一个延迟对象.但是很多时候,我们需要在多个延迟对象(异步代 ...
- java类加载器-Tomcat类加载器
在上文中,已经介绍了系统类加载器以及类加载器的相关机制,还自定制类加载器的方式.接下来就以tomcat6为例看看tomat是如何使用自定制类加载器的.(本介绍是基于tomcat6.0.41,不同版本可 ...
- maven基础知识
1.maven基础知识 1.1maven坐标 maven坐标通常用冒号作为分割符来书写,像这样的格式:groupId:artifactId:packaging:version.项目包含了junit3. ...
- 基于HT for Web的3D树的实现
在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...
- Python语言特性之3:@staticmethod和@classmethod
问题:Python中@staticmethod和@classmethod两种装饰器装饰的函数有什么不同? 原地址:http://stackoverflow.com/questions/136097/w ...
- [译]使用scikit-learn进行机器学习(scikit-learn教程1)
原文地址:http://scikit-learn.org/stable/tutorial/basic/tutorial.html 翻译:Tacey Wong 概要: 该章节,我们将介绍贯穿scikit ...
- vue之watch用法
对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项.在实例化时为每个键调用 $watch() ; //使用官方vue-cli脚手架书写<template> ...
- Visual Studio 2012 Update 4 RC 启动调试失败解决方案
以下解决办法适用于任何Visual Studio开发环境,及Windows NT 6.1以上系统. 系统:Windows 8.1 Enterprise x64 RTM 开发环境:Visual Stud ...