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方法分析完毕。

时间: 2024-08-10 15:14:50

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

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

Eval函数大家都很熟悉,但是globalEval方法却很少使用,大多数参考手册也没有相关api,下面就对其用法和源码相应介绍: jQuery.globalEval()函数用于全局性地执行一段JavaScript代码. 示例: var name = "全局变量"; function test(){ var name = "局部变量"; alert(name); // 局部变量 eval( "alert(name);" ); // 局部变量 $.g

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

jQuery.parseXML( data ) 接受一个格式良好的 XML 字符串,返回解析后的 XML 文档. 方法 jQuery.parseXML() 使用浏览器原生的 XML 解析函数实现. 在 IE 9+ 和其他浏览器中,会使用 DOMParser 对象解析: 在 IE 9 以下的浏览器中,则使用 ActiveXObject 对象解析 源码分析 // Cross-browser xml parsing parseXML: function( data ) { var xml, tmp;

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

isPlainObject方法 测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的) 示例: //测试是否为纯粹的对象 jQuery 代码: jQuery.isPlainObject({}) // true jQuery.isPlainObject("test") // false 源码分析: isPlainObject: function( obj ) { // Must be an Object. // Beca

转载Aaron ---- jQuery 2.0.3 源码分析core - 选择器

jQuery 2.0.3 源码分析core - 选择器(02) 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strings // Prioritize

jQuery.lazyload使用及源码分析

前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实例,源码分析(较简短),源码分析可以配合使用,配置属性,原理进行阅读,如需转载,请注明出处 博客园 华子yjh 一.如何使用 // 最简单的使用,不带参数 $('img').lazyload(); // 带参数(配置对象),下面配置对象中的各个属性值都是默认的 $('img').lazyload({

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%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/ 码字很辛苦,转载请注明来自Dylan‘s Zone的<Android Debuggerd 简要介绍和源码分析> 本文以android4.1为基础,分析debuggerd这个工具的使用方法和源码. 1.Debuggerd 简介

java集合框架10——TreeMap和源码分析(一)

前面讨论完了HashMap和HashTable的源码,这一节我们来讨论一下TreeMap.先从整体上把握TreeMap,然后分析其源码,深入剖析TreeMap的实现. 1. TreeMap简介 TreeMap是一个有序的key-value集合,它内部是通过红-黑树实现的,如果对红-黑树不太了解,请先参考下这篇博文:红-黑树.下面我们先来看看TreeMap的继承关系: java.lang.Object ? java.util.AbstractMap<K, V> ? java.util.TreeM

转载Aaron博客 ---- jQuery 2.0.3 源码分析core - 整体架构

jQuery 2.0.3 源码分析core - 整体架构 整体架构 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并

转:《Linux设备驱动程序3》源码目录结构和源码分析经典链接

转自:http://blog.csdn.net/geng823/article/details/37567557 [原创][专栏]<Linux设备驱动程序>--- LDD3源码目录结构和源码分析经典链接 [专栏]Linux设备驱动程序学习(总目录) [专栏]LDD3源码分析链接(总目录) 1. LDD3源码分析之hello.c与Makefile模板 2. LDD3源码分析之字符设备驱动程序 其他错误: 我的Linux内核为 3.2.0-65-generic-pae,在scull目录下make时