A method of judging the types of variables in JavaScript _javascript tips

In JavaScript, there are 5 basic data types and 1 complex data types, with basic data types: Undefined, Null, Boolean, number, and string; Complex data types are also subdivided into many specific types in object,object. For example: Array, Function, date, and so on. Today we're going to look at how to use the method to determine the type of a variable.

Before we explain the various methods, we first define a few test variables to see how the following methods can parse the type of the variable into what it is, and the next few variables contain almost the types we commonly use in actual coding.

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. Using typeof detection

The most we usually use is to use typeof to detect variable types. This time, we also use typeof to detect variable types:

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	function undefined Object object

From the results of the output, arr, JSON, NUL, date, Reg, and error are all detected as object types, and other variables can be detected correctly. When you want a variable of number, string, Boolean, function, undefined, JSON type, you can use typeof for judgment. Other variables are not judged to be of type, including null.
Also, typeof does not distinguish between array and JSON types. Because when you use typeof this variable, both the array and the JSON types output are object.

2. Using instance Detection

In JavaScript, to judge the type of a variable to try the typeof operator, it is a problem to store a value using a reference type when using the TypeOf operator, regardless of what type of object is referenced, it returns "Object". ECMAScript introduced another Java operator instanceof to solve the problem. The instanceof operator is similar to the typeof operator and is used to identify the type of object being processed. Unlike the typeof approach, the Instanceof method requires the developer to explicitly confirm that the object is a specific type. For example:

function person () {

}
var Tom = new Person ();
Console.log (Tom instanceof person); True

Let's take another look at the following example:

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 can also detect the relationship between multiple layers of inheritance.
OK, let's use the instanceof to detect the above variables:

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 
//Nu L:false 
//date:true 
//reg:true 
//Error:true

From the results above we can see that num, str, and BOOL do not detect his type, but we use the following method to create NUM, which can be detected by the type:

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

At the same time, we also want to see that und and Nul are instrumented object types to output True because there is no such global type of undefined and null in JS, they und and nul are both of type object, so the output is true.

3. Using constructor detection

When using instanceof to detect variable types, we are not detecting the type of number, ' string ', bool. So we need a different way to solve this problem.
Constructor was originally a property on a prototype object, pointing to a constructor. However, depending on the order in which the instance object looks for attributes, if there are no instance properties or methods on the instance object, the prototype chain is searched, so the instance object can also use the constructor attribute.
Let's first print out the contents of the Num.constructor, that is, the constructor of the variable of the numeric type:

function number () {[native code]}

We can see that it points to the constructor of number, so we can use Num.constructor==number to determine if num is a number type, and other variables are similar:

function person () {

}
var Tom = new Person ();

Undefined and null have no constructor attribute
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
);
All the results are true

From the results of the output we can see that, in addition to undefined and null, other types of variables can use constructor to determine the type.
However, using constructor is also not an insurance policy because the constructor property can be modified to cause the detected results to be incorrect, for example:

function person () {

}
function Student () {

}
student.prototype = new Person ();
var John = new Student ();
Console.log (john.constructor==student); False
Console.log (John.constructor==person);//True

In the above example, the constructor in the student prototype is modified to point to person, causing the instance object John's real constructor to be detected.
Also, using instaceof and Construcor, the judged array must be declared on the current page! For example, a page (parent page) has a frame, the frame refers to a page (subpage), in the child page declared an Array, and assign it to the parent page of a variable, then judge the variable, Array = = Object.constructor, return false; Reason:
1, the array belongs to the reference data, in the transfer process, only refers to the transfer of the address.
2, each page of the array native object refers to the address is not the same, in the child page declared array, the corresponding constructor, is a child page of the array object, the parent page to judge, the use of the array is not equal to the child page array; Remember, it is difficult to track the problem!
4. Use of Object.prototype.toString.call

Let's take a look at how he detects variable types first, regardless of what this is:

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] ' [REGEXP] ' [Object Error] '

From the result of the output, the Object.prototype.toString.call (variable) outputs a string with an array in it, the first argument is Object, the second is the type of the variable, and all the types of the variables are detected. We just need to remove the second parameter. Alternatively, you can use Object.prototype.toString.call (arr) = = "Object Array" to detect whether a variable arr is an array.
Let's now look at how the ECMA defines Object.prototype.toString.call:

Copy Code code as follows:

Object.prototype.toString () when the "toString" 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)

The above specification defines the behavior of the Object.prototype.toString: first, get an internal property of an object [[Class]], and then, based on this property, returns a similar to "[Object Array]" string as a result (read the ECMA standard should know that [[]] is used to represent an externally inaccessible property, called an "internal property," used within a language.) Using this method, and then with call, we can get the internal properties [[Class]] of any object, and then convert the type detection into string comparisons to achieve our goal.
5. Implementation of $.type in jquery

A $.type interface is provided in jquery to let us detect the types of variables:

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

See the output, is there a sense of familiarity? Yes, he's the second parameter of the result that uses the Object.prototype.toString.call (variable) output.
Let's start with a comparison of the results detected by all of the above methods, the horizontal is the detection method used, and the vertical is the variable:

Type judgment	typeof	instanceof	Constructor	Tostring.call	$.type
Num	Number	False	True	[Object number]	Number
Str	String	False	True	[Object String]	String
bool	Boolean	False	True	[Object Boolean]	Boolean
Arr	Object	True	True	[Object Array]	Array
Json	Object	True	True	[Object Object]	Object
Func	function	True	True	[Object Function]	function
und	Undefined	False	-	[Object Undefined]	Undefined
Nul	Object	False	-	[Object Null]	Null
Date	Object	True	True	[Object Date]	Date
Reg	Object	True	True	[Object REGEXP]	Regexp
Error	Object	True	True	[Object Error]	Error
Advantages	Simple to use, can directly output results	Capable of detecting complex types	Can basically detect all types.	All types are detected	-
Disadvantages	Too few types detected	The base type is not detected and cannot cross the IFRAME	Cannot cross IFrame, and constructor is easily modified	IE6 under Undefined,null are all object	-

By contrast, you can see the difference between the methods, and the results of Object.prototype.toString.call and $type output are really similar. Let's see how the $.type approach is implemented within jquery (2.1.2 Version):

The instance object is a
var class2type = {} that can directly use the method on the prototype chain;
var toString = class2type.tostring;

Omit part of code ...

Type:function (obj) {
	if (obj = = null) {return
		obj + "";
	}
	support:android<4.0, Ios<6 (functionish RegExp) return
	(typeof obj = = "Object" | | typeof obj = = "function" ) ?
		(class2type[tostring.call (obj)] | | ' Object ':
		typeof obj;
},

//Omit part of code ... 

Populate the Class2type map
jquery.each ("Boolean number String Function Array Date RegExp Object Error". Split ("") , function (i, name) {
	class2type["[object" + name + "]"] = Name.tolowercase ();
});

Let's take a look at this part of the 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 ();
});

After the loop, the value of ' Class2type ' is: 
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 Error] '  : ' Error '
}

Look at the type method again:

Implementation of type
type:function (obj) {
	//if passed in null or undefined, returns the string directly to this object
	//Where the object obj passed in is undefined, then returns " Undefined "
	if (obj = = null) {return
		obj +" ";
	}
	support:android<4.0, Ios<6 (functionish RegExp)
	//Low version RegExp return function type; High version corrected, return object type
	// If the obj type detected using typeof is an object or function, the value of the Class2type is returned, otherwise the type return typeof detected is returned
	(typeof obj = = "Object" | | typeof obj = = = "function")?
		(class2type[tostring.call (obj)] | | ' Object ':
		typeof obj;
}

When typeof obj = = = "Object" | | typeof obj = = "function", it returns class2type[Tostring.call (obj). Come here, we should understand why Object.prototype.toString.call and $.type so like, in fact, jquery is implemented with Object.prototype.toString.call, "[ Object Boolean] ' type to the ' Boolean ' type and return. If the Class2type store has no type of this variable, it returns "Object".
In addition to the "Object" and "function" types, other types use typeof for detection. That is, number, string, and Boolean variables, using typeof.