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類型，我們通過幾個例子來看看：

$.isFunction(123); // false$.isFunction(true);// false$.isFunction([1, 2]);// false$.isFunction(function(){});// truefunction 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]        // 40parseFloat([123])   // 123parseFloat([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({})  // truefunction Person(){    this.name = wenzi}$.isEmptyObject(new Person()); // falsefunction 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代碼時更加的方便。以後有機會時再總結其他的工具方法。