本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type

javascript中对变量类型的判断中,我们讲解了了jquery中$.type()实现的原理。当然,jquery除了提供$.type的工具方法外,还提供了几个其他的工具方法:$.isFunction(), $.isArray(), $.isWindow(), $.isNumeric()等。这几个方法从方法名上就能看出其用途来,下面我们来一一讲解这几个方法在jQuery(2.1.2)中实现的内部细节。

1. $.isFunction()

$.isFunction()是用来判断变量是否为function类型,我们通过几个例子来看看:

$.isFunction(123); // false
$.isFunction(true);// false
$.isFunction([1, 2]);// false
$.isFunction(function(){});// true function func(){ }
var sfunc = function(){ }
$.isFunction(func); // true
$.isFunction(sfunc);// true

从上面的例子中能够看到,在$.isFunction(param)中,若传入的param是function类型,则返回true;其他的类型则返回false。

查看jquery的源码我们可以看到,$.isFunction()也是通过$.type()实现的:

isFunction: function( obj ) {
return jQuery.type(obj) === "function";
}

2. $.isArray()

$.isArray()是用来判断变量是否为array类型。同样,我们也通过几个例子来看看$.isArray的用法:

$.isArray(123);   // false
$.isArray(true); // false
$.isArray([1, 2]);// true
$.isArray(new Array(3, 4)); // true

无论是array的字面量还是使用new关键词创建的变量,都能使用$.isArray()判断其是array类型。在jquery源码中,$.isArray调用的就是原生Array提供的isArray方法。因为在高版本的浏览器中,已经给原生JavaScript提供了一个isArray方法用来判断变量是否为array类型。

isArray: Array.isArray

3. $.isWindow()

$.isWindow()是用来判断当前变量是否为window,如:

$.isWindow(window); // true
$.isWindow([]); // false
$.isWindow(null); // false

在jQuery源码中:

isWindow: function( obj ) {
return obj != null && obj === obj.window;
}

他是通过判断obj是否有window属性,来判断obj是否为window对象。因为window对象里有一个属性window,就是他自己,因此:window.window===window,同样的:

window.window.window.window === window;

可以一直循环下去。

而代码里为什么要先判断一下obj是否为null呢?因为在判断null或undefined是否有window属性时,代码会抛出异常:Uncaught TypeError: Cannot read property 'window' of null。因此,为了防止代码错误,首先判断变量是否为null,若为null,则它肯定不是window对象,直接返回false;否则再判断这个变量有没有window属性。

4. $.isNumeric()

$.isNumeric()是用来判断当前变量是否为数字类型,可是为什么我不使用$.type()=="number"来判断呢。我们先来看几个官方的例子:

$.isNumeric("-10");  // true
$.isNumeric(16); // true
$.isNumeric(0xFF); // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5"); // true (exponential notation string)
$.isNumeric(3.1415); // true
$.isNumeric(+10); // true
$.isNumeric(0144); // true (octal integer literal)
$.isNumeric(""); // false
$.isNumeric({}); // false (empty object)
$.isNumeric(NaN); // false
$.isNumeric(null); // false
$.isNumeric(true); // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

使用$.isNumeric()能够判断出"-10", "0xFF"这样字符串类型的数字,而$.type()则会将其解析为string类型。

在jquery源码中,是这样判断变量类型的:

isNumeric: function( obj ) {
// parseFloat NaNs numeric-cast false positives (null|true|false|"")
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
// subtraction forces infinities to NaN
// adding 1 corrects loss of precision from parseFloat (#15100)
return !jQuery.isArray( obj ) && (obj - parseFloat( obj ) + 1) >= 0;
}

首先判断其变量是否为array类型,若是则直接返回false。可是为什么要先判断变量是否为array类型呢?因为[123]这样类型的数组是可以直接进行减法运算的,同时也能通过parseFloat(["123"])转换为数字:

[100] - 60  		// 40
[100] - [60] // 40
parseFloat([123]) // 123
parseFloat(["345"]) // 345

因此不能直接通过parseFloat()转换,然后判断。首先得判断这个变量是否为数组;若不是才进行下一步的判断:

(obj - parseFloat( obj ) + 1) >= 0

纯数字,字符串类型的数字,0开头的数字(8进制),0x开头的数组(16进制)等,都能通过parseFloat()正常进行转换为10进制的数字。经过上面表达式的运算,肯定是大于0的。可是为什么要加上1呢?代码里也解释了,通过parseFloat()转换到,会造成精度丢失的问题,因此+1后,运算结果更加的准确。

而其他类型的通过parseFloat()转换后得到的是NaN,NaN无论通过怎样的运算,都是不能跟0比较的,返回false。

在jquery之前的版本(如2.0.2)中:

isNumeric: function( obj ) {
return !isNaN( parseFloat(obj) ) && isFinite( obj );
}

我们可以发现,使用这样的代码$.isNumeric([123])运行后,得到的true,而实际上,它是个数组类型。不过还好,在后续的版本已经修复了。

5. $.isEmptyObject()

$.isEmptyObject()不是用来判断变量的类型了,而是判断一个object类型是否为空,不包含任何属性。

从 jQuery 1.4 开始,这个方法既检测对象本身的属性,也检测从原型继承的属性(因此没有使用hasOwnProperty)。参数应当是一个普通的JavaScript对象, 对于其他类型的对象(DOM元素,原始strings/numbers,host对象)在跨浏览器中可能无法提供一致的结果。

$.isEmptyObject({name:"wenzi"}) // false
$.isEmptyObject({}) // true function Person(){
this.name = "wenzi"
}
$.isEmptyObject(new Person()); // false function Student(){ }
Student.prototype.name = "wenzi";
$.isEmptyObject(new Student()); // false

我们能够看到,不论是对象本身的属性,还是prototype上的属性,只要存在,都会返回false。

isEmptyObject: function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
}

在jquery中,是通过for~in进行检测的。因为for~in也是能循环到prototype上的属性的,若进入到循环中,则说明obj存在属性,发挥false;否则返回true。

6. 总结

jquery中还提供了很多各种各样的工具方法,让我们在编写js代码时更加的方便。以后有机会时再总结其他的工具方法。

本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type

jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()的更多相关文章

  1. jquery-12 jquery中的工具方法有哪些

    jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...

  2. JQuery中的工具类(五)

    一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...

  3. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  4. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  5. jquery中的工具函数 Utilities

    noConflict(deep) 释放$和Jquery的控制权 isFunction(obj) isArray(obj) isWindow(obj) isNumeric(obj) type(obj) ...

  6. jQuery中的map()方法

    jQuery中map()方法的使用格式为:$(selector).map(callback(index,domElement)). 将在每一个被选元素上执行map()方法中设置的回调函数,在回调函数中 ...

  7. (转)jQuery中的extend()方法

    本文转自:http://www.xiabingbao.com/jquery/2015/05/30/jquery-extend 原文的排版要比这里美观很多,建议去原文查看.本文仅仅作为个人的mark,方 ...

  8. jQuery中的join方法

    和JS 中的JOIN 方法一样,将一数组按照JOIN的参数连接起来.比如: var arr = [ "a", "b", "c", " ...

  9. jquery中的index方法

    问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2)  //调用者P1可以为对象或集合 参数为空,返回P1 ...

随机推荐

  1. 前端 Dom 直接选择器

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  2. 汉字转换为拼音的JavaScript库

    将JSPinyin剥离mootools这个JavaScript库,可以独立使用. 1)一个是将汉字翻译为拼音,其中每一个字的首字母大写: pinyin.getFullChars(this.value) ...

  3. MySQL学习之——锁(转)

    锁,在现实生活中是为我们想要隐藏于外界所使用的一种工具.在计算机中,是协调多个进程或县城并发访问某一资源的一种机制.在数据库当中,除了传统的计算资源(CPU.RAM.I/O等等)的争用之外,数据也是一 ...

  4. python全栈开发从入门到放弃之socket并发编程之协程

    一.为什么会有协程 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情 ...

  5. Linux系统——文件和目录权限

    文件及目录权限(七进制表示) r  读权限(4),允许查看文件内容 w 写权限(2),允许修改文件内容 x  可执行权限(1),允许运行程序 - 无权限(0) 属主:拥有该文件的用户账号 属组:拥有该 ...

  6. 有界、无界队列对ThreadPoolExcutor执行的影响

    本文转载自https://blog.csdn.net/kusedexingfu/article/details/72491864 Java提供了4钟线程池: newCachedThreadPool n ...

  7. 在eclipse中new 对象后怎么通过快捷键自动生成返回对象

    如题,每次new 对象的时候不想手动补全返回对象,可以实现快捷键生成返回对象.new  对象后可以按住ctrl+1,如下图: 选择第一行即可.

  8. iOS 性能监测

    给些链接: http://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ%3D%3D&idx=1&mid=207890859&scene=23& ...

  9. ubuntu 14.04 163镜像

    1.备份原来/etc/apt/sources.list 2.以下内容覆盖原来文件内容 deb http://mirrors.163.com/ubuntu/ trusty main restricted ...

  10. yum安装redis phpredis扩展

    转载地址:http://blog.csdn.net/musicrabbit/article/details/9729941 redis和php-redis在官方源上是没有的,需要安装其他的源,其他源的 ...