jquery でのツールの使用方法 $.isFunction、$.isArray()、$.isWindow()_jquery

JavaScript における変数の型の判定では、jquery での $.type() 実装の原理を説明しました。もちろん、$.type ツール メソッドの提供に加えて、jquery は他のいくつかのツール メソッドも提供します: $.isFunction()、$.isArray()、$.isWindow()、$.isNumeric() など。これらのメソッドの目的はメソッド名からわかります。jQuery (2.1.2) で実装されたこれらのメソッドの内部詳細を 1 つずつ説明します。

1. $.isFunction()

$.isFunction() は、変数が関数型であるかどうかを判断するために使用されます。いくつかの例を見てみましょう。

$.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) では、受信パラメータが関数型の場合は true を返し、その他の型の場合は false を返します。

jquery のソース コードを見ると、$.isFunction() も $.type() を通じて実装されていることがわかります。

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

2. $.isArray()

$.isArray() は、変数が配列型かどうかを判断するために使用されます。同様に、いくつかの例を通して $.isArray の使用法も見ていきます。

配列リテラルであっても、new キーワードを使用して作成された変数であっても、$.isArray() を使用してそれが配列型であるかどうかを判断できます。 jquery ソース コードでは、$.isArray はネイティブ Array によって提供される isArray メソッドを呼び出します。ブラウザーの上位バージョンでは、変数が配列型かどうかを判断するための isArray メソッドがネイティブ JavaScript に提供されているためです。

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

isArray: Array.isArray

3. $.isWindow()

$.isWindow() は、現在の変数がウィンドウであるかどうかを判断するために使用されます。たとえば、

jQuery ソースコード内:

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

obj が wi​​ndow 属性を持っているかどうかを判断することで、obj が wi​​ndow オブジェクトであるかどうかを判断します。 window オブジェクトには属性 window があり、それ自体がウィンドウであるため、 window.window===window、同じです:

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

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

ループし続けることができます。

コード内で obj が null かどうかを最初に判断する必要があるのはなぜですか? null または unknown に window プロパティがあるかどうかを判断するときに、コードは次の例外をスローするためです。 Uncaught TypeError: Cannot read property 'window' of null.したがって、コード エラーを防ぐために、まず変数が null であるかどうかを判断し、null の場合は明らかに window オブジェクトではなく、直接 false を返します。それ以外の場合は、変数が window 属性を持つかどうかが判断されます。

4. $.isNumeric()

$.isNumeric() は現在の変数が数値型であるかどうかを判断するために使用されますが、$.type()=="number" を使用して判断しないのはなぜでしょうか。まずは公式の例をいくつか見てみましょう:

$.isNumeric() を使用すると、"-10" や "0xFF" などの文字列型の数値を決定でき、$.type() はそれらを文字列型に解析します。

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

jquery ソース コードでは、変数の型は次のように決定されます:

まず変数が配列型であるかどうかを判断し、配列型である場合は直接 false を返します。しかし、なぜ最初に変数が配列型であるかどうかを判断する必要があるのでしょうか? [123] 型の配列は直接減算でき、parseFloat(["123"]) を通じて数値に変換できるためです。

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;
}

そのため、parseFloat()で直接変換して判定することはできません。まず、変数が配列であるかどうかを判断する必要があります。そうでない場合は、次のステップに進みます。

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

(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([123]) を実行すると true が得られますが、実際には配列型であることがわかります。幸いなことに、この問題は後続のバージョンで修正されています。

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

5. $.isEmptyObject()

$.isEmptyObject() は、変数の型を決定するために使用されるのではなく、オブジェクト型が空で属性を含まないかどうかを決定するために使用されます。 jQuery 1.4 以降、このメソッドはオブジェクト自体のプロパティとプロトタイプから継承されたプロパティの両方を検出します (そのため hasOwnProperty は使用されません)。パラメーターはプレーンな JavaScript オブジェクトである必要があります。他のタイプのオブジェクト (DOM 要素、生の文字列/数値、ホスト オブジェクト) はブラウザー間で一貫した結果を提供しない可能性があります。

我们能够看到，不论是对象本身的属性，还是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代码时更加的方便。以后有机会时再总结其他的工具方法。