jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()


Posted in Javascript onAugust 09, 2015

在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代码时更加的方便。以后有机会时再总结其他的工具方法。

Javascript 相关文章推荐
js控制表单操作的常用代码小结
Aug 15 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
javascript中对变量类型的判断方法
Aug 09 #Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 #Javascript
jquery实现页面虚拟键盘特效
Aug 08 #Javascript
Jquery实现顶部弹出框特效
Aug 08 #Javascript
Jquery数字上下滚动动态切换插件
Aug 08 #Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 #Javascript
jQuery实现列表内容的动态载入特效
Aug 08 #Javascript
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
前台文员个人求职信范文
2014/01/05 职场文书
班级安全教育实施方案
2014/02/23 职场文书
法律进社区实施方案
2014/03/21 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server