jquery $.isFunction, $.isArray(), $.isWindow()_jquery에서 도구를 사용하는 방법

JavaScript에서 변수 유형 판단에서는 jquery에서 $.type() 구현 원리를 설명했습니다. 물론 $.type 도구 메서드를 제공하는 것 외에도 jquery는 $.isFunction(), $.isArray(), $.isWindow(), $.isNumeric() 등 여러 다른 도구 메서드도 제공합니다. 이들 메소드의 목적은 메소드 이름에서 알 수 있는데, jQuery(2.1.2)에 구현된 이들 메소드의 내부 내용을 하나씩 설명해보자.

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의 사용법도 살펴보겠습니다.

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

배열 리터럴인지 new 키워드를 사용하여 생성된 변수인지 $.isArray()를 사용하여 배열 유형인지 확인할 수 있습니다. jquery 소스 코드에서 $.isArray는 기본 Array에서 제공하는 isArray 메서드를 호출합니다. 상위 버전의 브라우저에서는 변수가 배열 유형인지 확인하기 위해 기본 JavaScript에 isArray 메소드가 제공되었습니다.
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에 창 속성이 있는지 확인하여 obj가 창 개체인지 확인합니다. window 객체 자체에 window 속성이 있으므로: window.window===window, 동일:

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

계속 반복할 수 있습니다.

먼저 코드에서 obj가 null인지 확인해야 하는 이유는 무엇인가요? null 또는 undefed에 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()은 이를 문자열 유형으로 구문 분석합니다.
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;
}

먼저 변수가 배열형인지 확인하고, 그렇다면 false를 직접 반환합니다. 그런데 왜 변수가 배열 유형인지 먼저 확인해야 합니까? [123] 유형의 배열은 직접 뺄 수 있고, parsFloat(["123"])을 통해 숫자로 변환될 수도 있기 때문입니다.

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

따라서,parseFloat()를 통해 직접 변환해서 판단할 수는 없습니다. 먼저 변수가 배열인지 확인해야 합니다. 그렇지 않은 경우 다음 단계로 진행하세요.

(obj - parsFloat( obj ) 1) >= 0

순수, 문자열형 숫자, 0(8진수)으로 시작하는 숫자, 0x(16진수)로 시작하는 배열 등은 parsFloat()를 통해 10진수로 변환할 수 있습니다. 위 식을 연산한 후에는 0보다 커야 합니다. 그런데 왜 1을 더하는 걸까요? 또한, 코드에서는 parFloat()를 통해 변환하면 정밀도가 떨어지는 문제가 발생한다고 설명되어 있으므로 1 이후에는 연산 결과가 더 정확해집니다.

다른 유형의 경우, 어떤 연산을 수행하더라도 NaN은 0과 비교할 수 없으며 false를 반환합니다.

이전 버전의 jquery(예: 2.0.2):

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

$.isNumeric([123]) 코드를 실행하면 true가 나오는 것을 알 수 있지만 실제로는 배열 유형입니다. 다행히 후속 버전에서는 수정되었습니다.

5. $.isEmptyObject()

$.isEmptyObject()는 변수의 유형을 결정하는 데 사용되지 않지만 객체 유형이 비어 있고 속성을 포함하지 않는지 확인하는 데 사용됩니다.
jQuery 1.4부터 이 메서드는 객체 자체의 속성과 프로토타입에서 상속된 속성을 모두 감지합니다(따라서 hasOwnProperty는 사용되지 않습니다). 매개변수는 일반 JavaScript 개체여야 하며, 다른 유형의 개체(DOM 요소, 원시 문자열/숫자, 호스트 개체)는 브라우저 전체에서 일관된 결과를 제공하지 않을 수 있습니다.

$.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代码时更加的方便。以后有机会时再总结其他的工具方法。