在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方法。因為在高版本的瀏覽器中,已經提供了一個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代码时更加的方便。以后有机会时再总结其他的工具方法。