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

这篇文章主要介绍了jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow(),需要的朋友可以参考下

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

1. $.isFunction()

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

1. $.isFunction(123); // false 
2. $.isFunction(true);// false 
3. $.isFunction([1, 2]);// false 
4. $.isFunction(function(){});// true 
5.  
6. function func(){ 
7.  
8. } 
9. var sfunc = function(){ 
10.  
11. } 
12. $.isFunction(func); // true 
13. $.isFunction(sfunc);// true 

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

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

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

2. $.isArray()

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

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

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

isArray: Array.isArray

3. $.isWindow()

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

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

在jQuery源码中：

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

他是通过判断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"来判断呢。我们先来看几个官方的例子：

1. $.isNumeric("-10"); // true 
2. $.isNumeric(16); // true 
3. $.isNumeric(0xFF); // true 
4. $.isNumeric("0xFF"); // true 
5. $.isNumeric("8e5"); // true (exponential notation string) 
6. $.isNumeric(3.1415); // true 
7. $.isNumeric(+10); // true 
8. $.isNumeric(0144); // true (octal integer literal) 
9. $.isNumeric(""); // false 
10. $.isNumeric({}); // false (empty object) 
11. $.isNumeric(NaN); // false 
12. $.isNumeric(null); // false 
13. $.isNumeric(true); // false 
14. $.isNumeric(Infinity); // false 
15. $.isNumeric(undefined); // false 

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

在jquery源码中，是这样判断变量类型的：

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

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

1. [100] - 60 // 40 
2. [100] - [60] // 40 
3. parseFloat([123]) // 123 
4. 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)中：

1. isNumeric: function( obj ) { 
2. return !isNaN( parseFloat(obj) ) && isFinite( obj ); 
3. } 

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

5. $.isEmptyObject()

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

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

1. $.isEmptyObject({name:"wenzi"}) // false 
2. $.isEmptyObject({}) // true 
3.  
4. function Person(){ 
5. this.name = "wenzi" 
6. } 
7. $.isEmptyObject(new Person()); // false 
8.  
9. function Student(){ 
10.  
11. } 
12. Student.prototype.name = "wenzi"; 
13. $.isEmptyObject(new Student()); // false 

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

1. isEmptyObject: function( obj ) { 
2. var name; 
3. for ( name in obj ) { 
4. return false; 
5. } 
6. return true; 
7. } 

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

6. 总结

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