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方法分析完毕。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢