This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Make sure you know about prototypes and chains before you read this blog. Most of the principles involve prototypes and chains. Check out this blog post to learn more about advanced js prototypes and prototype chains

1. Object. The prototype. ToString. Call/the apply () conclusion first throw conclusion: with the conclusion we come to understand this method

Object. The prototype. ToString. Actually call () method is to use the object. The prototype, the toString () method returns “[obejct object constructor name]” the principle to determine the data type, And all objects in JS are instances of Object. You can use call/apply to call the ToString () method of the Object.prototype Object

Object. The prototype. ToString. Call/the apply () to judge any data type

There are no browser compatibility issues

Determine the base data type

console.log(Object.prototype.toString.call('d')) // [object String]
console.log(Object.prototype.toString.call(8)) // [object Number]
console.log(Object.prototype.toString.call(false)) // [object Boolean]
console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null)) // [object Null]
console.log(Object.prototype.toString.call(Symbol(1))) // [object Symbol]

Copy the code

Determine the reference data type

console.log(Object.prototype.toString.call({})) // [object Object]
console.log(Object.prototype.toString.call([])) // [object Array]
console.log(Object.prototype.toString.call(new Date())) // [object Date]
console.log(Object.prototype.toString.call(function a(){})) // [object Function]
console.log(Object.prototype.toString.call(/a+/)) // [object RegExp]
Copy the code

Object. The prototype. ToString. Call/the apply () principle

The toString method returns type “[obejct Object constructor name]”, as you can see in the above example if I judge an Object

console.log(Object.prototype.toString.call({})) // [object Object]
Copy the code

The first return type is object, the second is the constructor name of the object THAT I passed in, and here I pass in an instance object, and we know from the prototype chain that the instance object of the object points to a constructor named Object, so I output [object object], And all objects in all JS are instances of Object so you can access this method through the prototype chain. So you can determine the data type. 2.typeof

Most commonly used but flawed

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object    
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object
Copy the code

Array, object, and NULL are all judged as object, and all others are correct.

3.instanceof

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

Copy the code

As you can see, Instanceof can only correctly determine the reference data type, not the base data type. The instanceof operator can be used to test whether an object has a constructor’s Prototype property in its prototype chain. So why can’t you determine the basic data type?

First, we know that instanceof works based on whether the constructor of the instance object is equal to the constructor of the later object,

2,’ STR ‘, etc. are not instantiated as objects. Code as proof:

console.log(new Number(2) instanceof Number);
console.log(new Boolean(true) instanceof Boolean);
console.log(new String('str') instanceof String);

Copy the code

2,’ STR ‘, etc. are not instance objects without new instantiation.

4.constructor

The principle is simple: an object accesses its constructor via constructor

console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true


Copy the code
constructorThere are two functions, one is to judge the type of data, the second is the object instance throughconstrcutorThe object accesses its constructor (Prototype chain knowledge). Note that if you create an object that changes its prototype,constructorCan not be used to determine the data type:Copy the code

Creation is not easy if there are mistakes welcome to point out