Test data type 1: typeof

 

The returned results are all strings, including the corresponding data type "number"/"string"/"boolean"/"undefined"/"symbol"/"object"/"function";

Limitation: when null is detected, the returned result is "object". When other special objects such as arrays and regularities are detected, the returned result is "object" and the specific type cannot be distinguished.

console.log(typeof 12); //=>"number"
console.log(typeof null); //=>"object"
console.log(typeof []); //=>"object"
console.log(typeof /^$/); //=>"object"

 

 

Limitations: since the prototype chain can be changed based on proto or prototype, the results detected based on instanceof are not necessarily accurate. The value of basic data type is not even an object, not to mention a proto. Although it is also an instance of its own class, it can also call the method on its prototype in JS, but instanceof does not recognize it.

console.log(12 instanceof Number); //false
console.log(new Number(12) instanceof Number); //true
console.log([] instanceof Array); //true
console.log([] instanceof Object); //true

function Fn() {}
Fn.prototype.__proto__ = Array.prototype;
let f = new Fn();
console.log(f instanceof Array); //true

 

 

Test data type 3: constructor

 

This is the attribute on the prototype of the class to which the instance belongs. It points to the class itself, but it can also be modified, similar to instanceof.

let arr = [];
console.log(arr.constructor); //ƒ Array() { [native code] }
console.log(arr.constructor === Array); //true

let n=12;
console.log(n.constructor === Number); //true

 

 

console.log(Object.prototype.toString.call(12)); //[object Number]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call({})); //[object Object]

function fn () {}
console.log(({}).toString.call(fn)); //[object Function]
console.log(({}).toString.call(/^$/)); //[object RegExp]
console.log(({}).toString.call(new Date)); //[object Date]

 

 

Although the detection data type 4 is relatively the best, but the format is a little more cumbersome. Can you find a way to encapsulate a method? The output result is similar to that of typeof. There are some direct outputs such as "number", "date" and "regexp".

var class2type = {};
var toString = class2type.toString; //=>Object.prototype.toString
var hasOwn = class2type.hasOwnProperty; //=>Object.prototype.hasOwnProperty
var fnToString = hasOwn.toString; //=>Function.prototype.toString
var ObjectFunctionString = fnToString.call(Object); //=>Object.toString() =>"function Object() { [native code] }"

"Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function anonymous(item) {
    class2type["[object " + item + "]"] = item.toLowerCase();
});
console.log(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"
[object Symbol]: "symbol"
*/

function toType(obj) {
    //=>obj may be null / undefined
    //=>return "null"/"undefined"
    if (obj == null) {
        return obj + "";
    }

    return typeof obj === "object" || typeof obj === "function" ? class2type[toString.call(obj)] || "object" : typeof obj;
}

 

This is the method used to detect data in jQuery, which can meet our requirements.

Of course, there are not many jQuery projects in the company now, and even fewer interviews will be asked, but many of them are worth studying.