javascript_javascript 기술에서 변수 유형을 결정하는 방법

JavaScript에는 5개의 기본 데이터 유형과 1개의 복합 데이터 유형이 있습니다. 기본 데이터 유형은 Undefine, Null, Boolean, Number 및 String입니다. 복합 데이터 유형은 Object이며 Object도 여러 특정 유형으로 세분화됩니다. . 배열, 함수, 날짜 등과 같은 유형입니다. 오늘은 변수의 유형을 결정하는 방법에 대해 설명하겠습니다.

다양한 방법을 설명하기 전에 먼저 몇 가지 테스트 변수를 정의하여 후속 방법이 변수 유형을 어떻게 구문 분석할 수 있는지 확인합니다. 다음 변수에는 실제 코딩에서 일반적으로 사용하는 유형이 거의 포함되어 있습니다.

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error= new Error();

1. 탐지 유형 사용

우리가 일반적으로 가장 많이 사용하는 것은 typeof를 사용하여 변수 유형을 감지하는 것입니다. 이번에는 변수의 유형을 감지하기 위해 typeof도 사용합니다.

console.log(
	typeof num, 
	typeof str, 
	typeof bool, 
	typeof arr, 
	typeof json, 
	typeof func, 
	typeof und, 
	typeof nul, 
	typeof date, 
	typeof reg, 
	typeof error
);
// number string boolean object	object function undefined object object object object

출력 결과를 보면 arr, json, nul, date, reg, error는 모두 객체 유형으로 감지되며, 기타 변수도 정확하게 감지할 수 있습니다. 변수 유형이 숫자, 문자열, 부울, 함수, 정의되지 않음 또는 json인지 확인해야 하는 경우 typeof를 사용하여 확인할 수 있습니다. null을 포함한 다른 변수의 유형은 확인할 수 없습니다.
또한 typeof는 배열과 json 유형을 구별할 수 없습니다. typeof 변수를 사용할 때 배열과 json 유형 모두 객체를 출력하기 때문입니다.

2. 인스턴스 감지 사용

JavaScript에서 typeof 연산자는 변수의 유형을 결정하는 데 자주 사용됩니다. typeof 연산자를 사용하면 참조 유형을 사용하여 값을 저장할 때 문제가 발생합니다. " ". ECMAScript는 이 문제를 해결하기 위해 또 다른 Java 연산자 인스턴스of를 도입합니다. instanceof 연산자는 typeof 연산자와 유사하며 처리 중인 객체의 유형을 식별하는 데 사용됩니다. typeof 메서드와 달리, instanceof 메서드에서는 개발자가 개체가 특정 형식인지 명시적으로 확인해야 합니다. 예:

function Person(){

}
var Tom = new Person();
console.log(Tom instanceof Person); // true

다음 예를 다시 살펴보겠습니다.

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // true
console.log(John instancdof Person); // true

instanceof는 다중 레벨 상속 관계도 감지할 수 있습니다.
좋습니다. 위의 변수를 감지하기 위해 instanceof를 사용해 보겠습니다.

console.log(
	num instanceof Number,
	str instanceof String,
	bool instanceof Boolean,
	arr instanceof Array,
	json instanceof Object,
	func instanceof Function,
	und instanceof Object,
	nul instanceof Object,
	date instanceof Date,
	reg instanceof RegExp,
	error instanceof Error
)
// num : false 
// str : false 
// bool : false 
// arr : true 
// json : true 
// func : true 
// und : false 
// nul : false 
// date : true 
// reg : true 
// error : true

위 실행 결과를 보면 num, str, bool의 타입은 검출되지 않았으나, 다음과 같은 방법으로 num을 생성하면 타입을 검출할 수 있습니다.

var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);

동시에 und와 nul이 객체 유형으로 감지되어 true를 출력하는지 확인해야 합니다. 왜냐하면 js에는 Undefound와 Null의 전역 유형이 없기 때문입니다. und와 nul은 둘 다 Object 유형에 속합니다. 그래서 그들은 true로 출력됩니다.

3. 생성자를 사용하여 감지

instanceof를 사용하여 변수 유형을 감지하는 경우 숫자, '문자열' 및 bool 유형을 감지할 수 없습니다. 그러므로 우리는 이 문제를 해결하기 위한 다른 방법을 찾아야 합니다.
constructor는 원래 생성자를 가리키는 프로토타입 객체의 속성입니다. 그러나 인스턴스 객체가 속성을 검색하는 순서에 따라 인스턴스 객체에 인스턴스 속성이나 메소드가 없으면 프로토타입 체인에서 검색되므로 인스턴스 객체도 생성자 속성을 사용할 수 있습니다.
먼저 num.constructor의 내용, 즉 숫자 유형 변수의 생성자가 어떻게 생겼는지 출력해 보겠습니다.

function Number() { [네이티브 코드] }

Number의 생성자를 가리키는 것을 볼 수 있습니다. 따라서 num.constructor==Number를 사용하여 num이 Number 유형인지 확인할 수 있습니다.

function Person(){

}
var Tom = new Person();

// undefined和null没有constructor属性
console.log(
	Tom.constructor==Person,
	num.constructor==Number,
	str.constructor==String,
	bool.constructor==Boolean,
	arr.constructor==Array,
	json.constructor==Object,
	func.constructor==Function,
	date.constructor==Date,
	reg.constructor==RegExp,
	error.constructor==Error
);
// 所有结果均为true

출력 결과를 보면 undefine과 null을 제외한 다른 유형의 변수는 생성자를 사용하여 유형을 결정할 수 있음을 알 수 있습니다.
그러나 생성자를 사용하는 것은 생성자 속성이 수정될 수 있으므로 안전하지 않습니다. 이로 인해 감지된 결과가 올바르지 않게 될 수 있습니다. 예:

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true

위 예에서 Student 프로토타입의 생성자는 Person을 가리키도록 수정되어 인스턴스 객체 John의 실제 생성자를 감지할 수 없다는 사실이 발생합니다.
동시에, 인스턴스 오브(instanceof)와 생성자(constructor)를 사용할 때, 판단되는 배열은 현재 페이지에서 선언되어야 합니다! 예를 들어, 페이지(상위 페이지)에는 프레임이 있고, 페이지(하위 페이지)는 프레임에서 참조되며, 이때 하위 페이지에 배열이 선언되고 해당 변수에 할당됩니다. 판단되면 Array == object.constructor는 false를 반환합니다.
1. 배열은 참조 데이터이며 전송 과정에서는 참조 주소만 전송됩니다.
2. 각 페이지의 배열 기본 개체가 참조하는 주소는 다릅니다. 하위 페이지에 선언된 배열의 해당 생성자는 하위 페이지의 배열 개체이며 사용되는 배열은 다음과 같습니다. Array of subpages와 같지 않습니다. 그렇지 않으면 문제를 추적하기가 어렵습니다.
4. Object.prototype.toString.call 사용

이것이 무엇인지는 신경 쓰지 말고 먼저 변수 유형을 감지하는 방법을 살펴보겠습니다.

console.log(
	Object.prototype.toString.call(num),
	Object.prototype.toString.call(str),
	Object.prototype.toString.call(bool),
	Object.prototype.toString.call(arr),
	Object.prototype.toString.call(json),
	Object.prototype.toString.call(func),
	Object.prototype.toString.call(und),
	Object.prototype.toString.call(nul),
	Object.prototype.toString.call(date),
	Object.prototype.toString.call(reg),
	Object.prototype.toString.call(error)
);
// '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]'
// '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]'

从输出的结果来看，Object.prototype.toString.call(变量)输出的是一个字符串，字符串里有一个数组，第一个参数是Object，第二个参数就是这个变量的类型，而且，所有变量的类型都检测出来了，我们只需要取出第二个参数即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"来检测变量arr是不是数组。
我们现在再来看看ECMA里是是怎么定义Object.prototype.toString.call的：

复制代码 代码如下:

Object.prototype.toString( ) When the toString method is called, the following steps are taken:
1. Get the [[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
3. Return Result (2)

上面的规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]”的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
5. jquery中$.type的实现

在jquery中提供了一个$.type的接口，来让我们检测变量的类型：

console.log(
	$.type(num),
	$.type(str),
	$.type(bool),
	$.type(arr),
	$.type(json),
	$.type(func),
	$.type(und),
	$.type(nul),
	$.type(date),
	$.type(reg),
	$.type(error)
);
// number string boolean array object function undefined null date regexp error

출력물을 보면 익숙한 느낌이 드시나요? 예, 위의 Object.prototype.toString.call(변수)을 사용한 결과 출력의 두 번째 매개변수입니다.
먼저 위의 모든 방법의 탐지 결과를 비교해 보겠습니다. 가로 행은 사용된 탐지 방법이고 세로 행은 각 변수입니다.

类型判断	유형	인스턴스	건축자	toString.call	$.type
번호	번호	거짓	그렇습니다	[객체 번호]	번호
스트	문자열	거짓	그렇습니다	[객체 문자열]	문자열
부끄러운	부울	거짓	그렇습니다	[객체 부울]	부울
아아	객체	그렇습니다	그렇습니다	[객체 배열]	배열
json	객체	그렇습니다	그렇습니다	[객체 객체]	객체
펑션	기능	그렇습니다	그렇습니다	[객체 함수]	기능
그리고	정의되지 않음	거짓	-	[객체 정의되지 않음]	정의되지 않음
널	객체	거짓	-	[객체 Null]	널
날짜	객체	그렇습니다	그렇습니다	[개체 날짜]	날짜
등록	객체	그렇습니다	그렇습니다	[객체 RegExp]	정규 표현식
오류	객체	그렇습니다	그렇습니다	[개체 오류]	오류
장점	사용이 간편하고 결과를 직접 출력할 수 있습니다	복잡한 유형 감지 가능	기본적으로 모든 유형 감지 가능	모든 유형 감지	-
단점	검색된 유형이 너무 적습니다	기본 유형을 감지할 수 없으며 iframe을 교차할 수 없습니다	iframe을 교차할 수 없으며 생성자가 쉽게 수정됩니다	IE6에서는 정의되지 않음과 null이 모두 객체입니다	-

这样对比一下，就更能看到各个方法之间的区别了，而且Object.prototype.toString.call和$type输出的结果真的很像。我们来看看jquery（2.1.2版本）内部是怎么实现$.type方法的：

// 实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;

// 省略部分代码...

type: function( obj ) {
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
},

// 省略部分代码... 

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

我们先来看看jQuery.each的这部分：

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//循环之后，`class2type`的值是： 
class2type = {
	'[object Boolean]' : 'boolean', 
	'[object Number]' : 'number',
	'[object String]' : 'string',
	'[object Function]': 'function',
	'[object Array]'  : 'array',
	'[object Date]'  : 'date',
	'[object RegExp]' : 'regExp',
	'[object Object]' : 'object',
	'[object Error]'  : 'error'
}

再来看看type方法：

// type的实现
type: function( obj ) {
	// 若传入的是null或undefined，则直接返回这个对象的字符串
	// 即若传入的对象obj是undefined，则返回"undefined"
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	// 低版本regExp返回function类型；高版本已修正，返回object类型
	// 若使用typeof检测出的obj类型是object或function，则返回class2type的值，否则返回typeof检测的类型
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
}

当typeof obj === "object" || typeof obj === "function"时，就返回class2type[ toString.call(obj)。到这儿，我们就应该明白为什么Object.prototype.toString.call和$.type那么像了吧，其实jquery中就是用Object.prototype.toString.call实现的，把'[object Boolean]'类型转成'boolean'类型并返回。若class2type存储的没有这个变量的类型，那就返回”object”。
除了”object”和”function”类型，其他的类型则使用typeof进行检测。即number, string, boolean类型的变量，使用typeof即可。