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

本文正式地址：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