In the process of writing a js program, you may often need to judge the type of an object. For example, if you write a function, you need to write different code by judging different parameter types.
First, you may think of the typeof operator, and see the following example:
<script type="text/javascript"> var object = {}; var b = true; alert(typeof object + " " + typeof b); </script>The results obtained are as follows:
From the above results, we can see that the type of the object can be displayed using the typeof operator. So what will be the result of the scope of the typeof operator null and undefined?
/*var object = {}; var b = true; alert(typeof object + " " + typeof b);*/ alert(typeof null + " " + typeof undefined)The typeof operator acts on null and actually displays "object" (this seems unscientific, I thought it would display "null'"), and the undefined displays "undefined" (this meets the result we hope). Therefore, when using the typeof operator to judge the type of an object, be especially careful, because this object may be null. The above only gives some results of typeof acting on these objects. The following table lists the results of the typeof operator acting on Boolean, Number, String, Array, Date, RegExp, Object, Function, null, undefined (interested readers can test it yourself):
From the results of the above table, we can see that Array, Date, and RegExp display all objects, so why not directly display the type of object? This requires another operator to be derived from js: instanceof operator, which is used to determine whether an object is an object of some type, and the calculated value is true or false. Let’s take a look first:
var now = new Date(); var pattern = /^[/s/S]*$/; var names = ['zq', 'john']; alert((now instanceof Date) + " " + (pattern instanceof RegExp) + " " + (names instanceof Array));
Obviously, the type of the object can be judged through this instanceof, but this can only judge other types except for the basic type (including the String type), and it cannot judge the basic type. However, instanceof cannot always be judged normally. Considering the case of a framework, to determine that the object of its type is an object passed by another frame, first look at the following example.
main.html
<!doctype html> <html lang="en"> <head> <title>Main</title> </head> <frameset cols="45%,*"> <frame name="frame1" src="frame1.html"/> <frame name="frame2" src="frame2.html"/> </frameset> </html>
frame1.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>frame1</title> </head> <script type="text/javascript"> var names = ['riccio zhang', 'zq', 'john']; </script> <body style="background: #ccc"> </body> </html>
frame2.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>frame2</title> <script type="text/javascript"> document.write("top.frame1.names instanceof Array:" + (top.frame1.names instanceof Array)); document.write("<br/>"); document.write("top.frame1.names instanceof top.frame1.Array:" + (top.frame1.names instanceof top.frame1.Array)); document.write("<br/>"); document.write("top.frame1.Array === top.frame2.Array?" + (top.frame1.Array === top.frame2.Array)); </script> </head> <body style="background: #747474"> </body> </html>The names object is in the frame1 framework, and is created by the Array of the frame1 framework. If the names object is taken to the Array in frame2 for comparison, it is obvious that names are not an instance of Array in frame2. It is thought that frame1 and frame2 are not the same and Array at all. From the second realistic result, it can be clearly seen that names are an instance of the frame where it is located. From the third output, it can be seen that the Array of frame1 and the Array of frame2 are different. So what should I do if I encounter the above cross-frame comparison? We can't compare the Array corresponding to the framework every time. There is a necessary way to solve the above problem. See the following code:
var toString = {}.toString; var now = new Date(); alert(toString.call(now)){}.toString means to obtain the toString method on the Object object (one of the basic methods of the Object object when this method), and toString.call(now) means to call the toString method. Calling the most native toString() of the Date object (this method is the method above Object) method can display a string of type [object Date]. If it is Array, the word [object Array] will be generated. That is to say, performing the above operations will display words similar to [object Class]. So we just need to judge this string to know its type? From this, you can write the following tool class:
tools.js
var tools = (function(undefined){ var class2type = {}, toString = {}.toString; var fun = { type: function (obj){ return obj === null || obj === undefined ? String(obj) : class2type[toString.call(obj)] }, isArray: function (obj){ return fun.type(obj) === "array"; }, isFunction: function (obj){ return fun.type(obj) === "function"; }, each: function (arr, callback){ var i = 0, hasLength = arr.length ? true : false; if(!callback || (typeof callback !== 'function') || !hasLength){ return; } for(i = 0; i< arr.length; i++){ if(callback.call(arr[i], i, arr[i]) === false){ break; } } } } }; fun.each("Boolean Number String Array Date RegExp Object Function".split(" "), function(i, name){ class2type["[object "+ name +"]"] = name.toLowerCase(); }); return fun; })();tools provide methods such as type, isArray, isFunction, etc. to judge the type of the object. According to actual needs, you can add methods to determine the type by yourself. type accepts an obj parameter, which returns the actual type of the object in lowercase form. For example, if you need to judge that the type of the object is Array, then this method will return an array.
According to the tool class provided above, rewrite the above example:
fram2.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>frame2</title> <script type="text/javascript" src="tools.js"></script> <script type="text/javascript"> document.write("top.frame1.names instanceof Array:" + (top.frame1.names instanceof Array)); document.write("<br/>"); document.write("top.frame1.names instanceof top.frame1.Array:" + (top.frame1.names instanceof top.frame1.Array)); document.write("<br/>"); document.write("top.frame1.Array === top.frame2.Array?" + (top.frame1.Array === top.frame2.Array)); document.write("<br/>"); document.write("tools.isArray(top.frame1.names)?" + tools.isArray(top.frame1.names)); </script> </head> <body style="background: #747474"> </body> </html>At this point, the object type can be easily judged by the above class.
Note: In IE, elements such as alert cannot be judged.