First, the typeof

Typeof value 2. Return value: The value returned is a string value, such as "number", "string", "Boolean", "undefined", "object", "function", "symbol", "bigint" 3. Advantages: Easy to use, detecting both base and reference types 4. Disadvantages: 1. Cannot subdivide objects, such as detecting normal objects/array objects/regular objects... All the results are Object. 2. The result of typeof detection is Object, because the mechanism of typeof detection is based on the encoding characteristic of the data type stored in the computer. The value of Object type is stored with 000, while the value of null type is stored with 0 in the computer. So it is recognized as an object, but the actual result is null, which is not an object, this is typeof detection bug. 5. Application scenarios: Generally used to detect common types and whether they are objects or functions Code snippets to detect whether they are objects or functions are as follows:Copy the code

if (x ! == null && /^(object|function)$/.test(typeof x)) { ... }Copy the code

Second, the instanceof

1. Syntax: value instanceof constructor 2 Return value: The return value is a Boolean that returns true as long as the prototype chain of the instance has a constructor equal to it and false 3 otherwise. Advantages: To compensate for typeof's shortcomings, object types can be subdivided, such as checking for arrays, 4. Disadvantages: 1. Detected instances must be reference types; 2. Instances of primitive data types cannot be detected based on it. Literals and instances not created in the new form cannot be detected. 2. The result of detection will not allow the following codeCopy the code

    var x = 10
    console.log(x instanceof Number) // false

    var y = Number(10)
    console.log(y instanceof Number) // false

    var z = new Number(10)
    console.log(z instanceof Number) // true
    
    
    var x = [];
    console.log(x instanceof Object); //true
    console.log(x instanceof Array)  //true
Copy the code

5. The detection principle of handwriting an InstanceofCopy the code

    function _instanceof(value, Ctor) {
	let prototype = Object.getPrototypeOf(value);
	while (prototype) {
		if (prototype === Ctor.prototype) return true;
		prototype = Object.getPrototypeOf(prototype);
	}
	return false;
    }
Copy the code

Third, the constructor

Constructor === class 2 Principle: Use the constructor attribute of a stereotype on a class to point to the class itself 3. Advantages: it is simple to use and can detect basic data types. 3. Disadvantages: The stereotype of the class can be easily refactored, resulting in constructor loss, and constructor properties can be easily modified, resulting in inaccurate resultsCopy the code

Four, the Object. The prototype. ToString. Call ()

1. Background: toString calls on Object prototypes return the data type of the instance passed in, whereas toString methods on other objects convert variables toString 2. Grammar: Object. The prototype. ToString. Call () 3. The return value: Common values for [Object class] are [Object Number]/[Object String]/[Object Boolean]/[Object Null]/[Object Object]/[Object Array]...... Advantages: can detect any data type 5. Disadvantages :1. Performance is inferior to typeof 2. The solution to data type detection for custom classes is as followsCopy the code

function Fn() {} if (typeof Symbol ! == undefined) { Fn.prototype[Symbol.toStringTag] = 'Fn'; } let fn = new Fn(); console.log({}.toString.call(fn)); //[Object Fn]Copy the code

5. Detection data type based on jQuery source package

(function () { var class2type = {}; var toString = class2type.toString; var mapType = [ 'Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Object', 'Error', 'Symbol', 'BigInt', ]; mapType.forEach(function (name) { class2type['[object ' + name + ']'] = name.toLocaleLowerCase(); }); var toType = function toType(obj) { if (obj == null) { return obj + ''; } return typeof obj === 'object' || typeof obj === 'function' ? class2type[toString.call(obj)] || 'object' : typeof obj; }; /* Expose API "support browser direct import & Webpack CommonJS module import" */ if (typeof Window! == 'undefined') { window.toType = toType; } if (typeof module === 'object' && typeof module.exports === 'object') { module.toType = toType; }}) ();Copy the code