Home >Web Front-end >JS Tutorial >How to use tools in jquery $.isFunction, $.isArray(), $.isWindow()_jquery
In Judgement of variable type in JavaScript, we explained the principle of $.type() implementation in jquery. Of course, in addition to providing $.type tool methods, jquery also provides several other tool methods: $.isFunction(), $.isArray(), $.isWindow(), $.isNumeric(), etc. The purpose of these methods can be seen from the method names. Let's explain the internal details of these methods implemented in jQuery (2.1.2) one by one.
1. $.isFunction()
$.isFunction() is used to determine whether a variable is of function type. Let’s take a look at a few examples:
$.isFunction(123); // false $.isFunction(true);// false $.isFunction([1, 2]);// false $.isFunction(function(){});// true function func(){ } var sfunc = function(){ } $.isFunction(func); // true $.isFunction(sfunc);// true
As you can see from the above example, in $.isFunction(param), if the incoming param is a function type, it will return true; for other types, it will return false.
Looking at the source code of jquery, we can see that $.isFunction() is also implemented through $.type():
isFunction: function( obj ) { return jQuery.type(obj) === "function"; }
2. $.isArray()
$.isArray() is used to determine whether the variable is of array type. Similarly, we also look at the usage of $.isArray through several examples:
$.isArray(123); // false $.isArray(true); // false $.isArray([1, 2]);// true $.isArray(new Array(3, 4)); // true
Whether it is an array literal or a variable created using the new keyword, you can use $.isArray() to determine whether it is an array type. In the jquery source code, $.isArray calls the isArray method provided by native Array. Because in higher versions of browsers, native JavaScript has been provided with an isArray method to determine whether the variable is of array type.
isArray: Array.isArray
3. $.isWindow()
$.isWindow() is used to determine whether the current variable is window, such as:
$.isWindow(window); // true $.isWindow([]); // false $.isWindow(null); // false
In jQuery source code:
isWindow: function( obj ) { return obj != null && obj === obj.window; }
He determines whether obj is a window object by determining whether obj has a window attribute. Because there is an attribute window in the window object, which is itself, therefore: window.window===window, the same:
window.window.window.window === window;
You can keep looping.
Why do we need to first determine whether obj is null in the code? Because when judging whether null or undefined has a window property, the code will throw an exception: Uncaught TypeError: Cannot read property 'window' of null. Therefore, in order to prevent code errors, first determine whether the variable is null. If it is null, it is definitely not a window object and returns false directly; otherwise, it is then determined whether the variable has a window attribute.
4. $.isNumeric()
$.isNumeric() is used to determine whether the current variable is of numeric type, but why don’t I use $.type()=="number" to determine. Let’s take a look at some official examples first:
$.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
Using $.isNumeric() can determine string type numbers such as "-10" and "0xFF", while $.type() will parse them into string type.
In the jquery source code, the variable type is determined like this:
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; }
First determine whether the variable is of array type, and if so, return false directly. But why do we need to first determine whether the variable is of array type? Because arrays of type [123] can be directly subtracted, and can also be converted to numbers through parseFloat(["123"]):
[100] - 60 // 40 [100] - [60] // 40 parseFloat([123]) // 123 parseFloat(["345"]) // 345
Therefore, it cannot be converted directly through parseFloat() and then judged. First, you must determine whether the variable is an array; if not, proceed to the next step:
(obj - parseFloat( obj ) 1) >= 0
Pure numbers, string type numbers, numbers starting with 0 (octal), arrays starting with 0x (hexadecimal), etc. can be converted to decimal numbers through parseFloat(). After the operation of the above expression, it must be greater than 0. But why add 1? It is also explained in the code that converting through parseFloat() will cause the problem of loss of precision, so after 1, the operation result will be more accurate.
For other types, NaN is obtained after conversion through parseFloat(). No matter what operation is performed, NaN cannot be compared with 0 and returns false.
In previous versions of jquery (such as 2.0.2):
isNumeric: function( obj ) { return !isNaN( parseFloat(obj) ) && isFinite( obj ); }
We can find that after running the code $.isNumeric([123]), we get true, but in fact, it is an array type. Fortunately, it has been fixed in subsequent versions.
5. $.isEmptyObject()
$.isEmptyObject() is not used to determine the type of a variable, but to determine whether an object type is empty and does not contain any attributes.
Starting with jQuery 1.4, this method detects both properties on the object itself and properties inherited from the prototype (so hasOwnProperty is not used). The parameter should be a plain JavaScript object, other types of objects (DOM elements, raw strings/numbers, host objects) may not provide consistent results across browsers.
$.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代码时更加的方便。以后有机会时再总结其他的工具方法。