在javascript中對(duì)變量類型的判斷中，我們講解了了jquery中$.type()實(shí)現(xiàn)的原理。當(dāng)然，jquery除了提供$.type的工具方法外，還提供了幾個(gè)其他的工具方法：$.isFunction(), $.isArray(), $.isWindow(), $.isNumeric()等。這幾個(gè)方法從方法名上就能看出其用途來(lái)，下面我們來(lái)一一講解這幾個(gè)方法在jQuery(2.1.2)中實(shí)現(xiàn)的內(nèi)部細(xì)節(jié)。

1. $.isFunction()

$.isFunction()是用來(lái)判斷變量是否為function類型，我們通過(guò)幾個(gè)例子來(lái)看看：

$.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()也是通過(guò)$.type()實(shí)現(xiàn)的：

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

2. $.isArray()

$.isArray()是用來(lái)判斷變量是否為array類型。同樣，我們也通過(guò)幾個(gè)例子來(lái)看看$.isArray的用法：

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

無(wú)論是array的字面量還是使用new關(guān)鍵詞創(chuàng)建的變量，都能使用$.isArray()判斷其是array類型。在jquery源碼中，$.isArray調(diào)用的就是原生Array提供的isArray方法。因?yàn)樵诟甙姹镜臑g覽器中，已經(jīng)給原生JavaScript提供了一個(gè)isArray方法用來(lái)判斷變量是否為array類型。
isArray: Array.isArray
3. $.isWindow()

$.isWindow()是用來(lái)判斷當(dāng)前變量是否為window，如：

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

在jQuery源碼中：

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

他是通過(guò)判斷obj是否有window屬性，來(lái)判斷obj是否為window對(duì)象。因?yàn)閣indow對(duì)象里有一個(gè)屬性window，就是他自己，因此：window.window===window，同樣的：

window.window.window.window === window;

可以一直循環(huán)下去。

而代碼里為什么要先判斷一下obj是否為null呢？因?yàn)樵谂袛鄋ull或undefined是否有window屬性時(shí)，代碼會(huì)拋出異常：Uncaught TypeError: Cannot read property ‘window' of null。因此，為了防止代碼錯(cuò)誤，首先判斷變量是否為null，若為null，則它肯定不是window對(duì)象，直接返回false；否則再判斷這個(gè)變量有沒(méi)有window屬性。

4. $.isNumeric()

$.isNumeric()是用來(lái)判斷當(dāng)前變量是否為數(shù)字類型，可是為什么我不使用$.type()=="number"來(lái)判斷呢。我們先來(lái)看幾個(gè)官方的例子：

$.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”這樣字符串類型的數(shù)字，而$.type()則會(huì)將其解析為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?？墒菫槭裁匆扰袛嘧兞渴欠駷閍rray類型呢？因?yàn)閇123]這樣類型的數(shù)組是可以直接進(jìn)行減法運(yùn)算的，同時(shí)也能通過(guò)parseFloat([“123”])轉(zhuǎn)換為數(shù)字：

[100] - 60 		// 40
[100] - [60] 		// 40
parseFloat([123]) 	// 123
parseFloat(["345"]) // 345

因此不能直接通過(guò)parseFloat()轉(zhuǎn)換，然后判斷。首先得判斷這個(gè)變量是否為數(shù)組；若不是才進(jìn)行下一步的判斷：

(obj - parseFloat( obj ) + 1) >= 0

純數(shù)字，字符串類型的數(shù)字，0開(kāi)頭的數(shù)字（8進(jìn)制），0x開(kāi)頭的數(shù)組（16進(jìn)制）等，都能通過(guò)parseFloat()正常進(jìn)行轉(zhuǎn)換為10進(jìn)制的數(shù)字。經(jīng)過(guò)上面表達(dá)式的運(yùn)算，肯定是大于0的?？墒菫槭裁匆由?呢？代碼里也解釋了，通過(guò)parseFloat()轉(zhuǎn)換到，會(huì)造成精度丟失的問(wèn)題，因此+1后，運(yùn)算結(jié)果更加的準(zhǔn)確。

而其他類型的通過(guò)parseFloat()轉(zhuǎn)換后得到的是NaN，NaN無(wú)論通過(guò)怎樣的運(yùn)算，都是不能跟0比較的，返回false。

在jquery之前的版本（如2.0.2）中：

isNumeric: function( obj ) {
	return !isNaN( parseFloat(obj) ) && isFinite( obj );
}

我們可以發(fā)現(xiàn)，使用這樣的代碼$.isNumeric([123])運(yùn)行后，得到的true，而實(shí)際上，它是個(gè)數(shù)組類型。不過(guò)還好，在后續(xù)的版本已經(jīng)修復(fù)了。

5. $.isEmptyObject()

$.isEmptyObject()不是用來(lái)判斷變量的類型了，而是判斷一個(gè)object類型是否為空，不包含任何屬性。
從 jQuery 1.4 開(kāi)始，這個(gè)方法既檢測(cè)對(duì)象本身的屬性，也檢測(cè)從原型繼承的屬性（因此沒(méi)有使用hasOwnProperty）。參數(shù)應(yīng)當(dāng)是一個(gè)普通的JavaScript對(duì)象， 對(duì)于其他類型的對(duì)象（DOM元素，原始strings/numbers，host對(duì)象）在跨瀏覽器中可能無(wú)法提供一致的結(jié)果。

$.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

我們能夠看到，不論是對(duì)象本身的屬性，還是prototype上的屬性，只要存在，都會(huì)返回false。

isEmptyObject: function( obj ) {
	var name;
	for ( name in obj ) {
		return false;
	}
	return true;
}

在jquery中，是通過(guò)for~in進(jìn)行檢測(cè)的。因?yàn)閒or~in也是能循環(huán)到prototype上的屬性的，若進(jìn)入到循環(huán)中，則說(shuō)明obj存在屬性，發(fā)揮false；否則返回true。
6. 總結(jié)

jquery中還提供了很多各種各樣的工具方法，讓我們?cè)诰帉?xiě)js代碼時(shí)更加的方便。以后有機(jī)會(huì)時(shí)再總結(jié)其他的工具方法。

最新評(píng)論