Data type detection in JS

1.type of

Definition: operator used to detect data type. There are two uses:

1.type(expression) : Operate on expressions
2.typeof Variable name: operate on the variable.

Return value: first detect that the returned result is a string.
So let's look at the following expression (recently seen interview questions):

console.log(typeof typeof typeof typeof []); 

Since the result returned by typeof is always a string (the string contains the corresponding type), when two or more typeof tests occur in succession, the final result is ` "string".
("number","string","boolean","undefined","object","function","symbol","bigint")
For the original type, except for null (this is the BUG of the browser: all values are stored in binary code in the calculation. The first three bits of 000 are regarded as objects in the browser, while the first three bits of null binary are 000, so they are recognized as objects, but they are not objects. They are null object pointers and basic type values). typeof can be called to display the correct type.

console.log(typeof expamle); //'undefined'
console.log(typeof true); //'boolean'
console.log(typeof "123"); //'string'
console.log(typeof 123); //'number'
console.log(typeof NaN); //'number'
console.log(typeof null); //'object'

However, for reference data types, "object" will be displayed except for functions.

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

2.instanceof

Definition: used to detect whether an instance belongs to this class. The prototype of the current class will be returned as long as it appears on the prototype chain of the instance (instanceof is implemented based on the prototype chain).
for instance

const Person = function() {}
const p1 = new Person()
p1 instanceof Person // true

var str1 = 'hello world'
str1 instanceof String // false

var str2 = new String('hello world')
str2 instanceof String // true

Handwriting and verification

 //Handwritten instanceof
      function newInstanceOf(leftValue, rightValue) {
        if (typeof leftValue !== "object" || rightValue == null) {
          return false;
        }

        let rightProto = rightValue.prototype;
        leftValue = leftValue.__proto__;

        while (true) {
          if (leftValue === null) return false;
          if (leftValue === rightProto) return true;
          leftValue = leftValue.__proto__;
        }
      }
      //verification
      const a = [];
      const b = {};

      function Foo () {}

      var c = new Foo()
      function Child () {}
      function Father() {}
      Child.prototype = new Father()
      var d = new Child()

      console.log(newInstanceOf(a, Array)) // true
      console.log(newInstanceOf(b, Object)) // true
      console.log(newInstanceOf(b, Array)) // false
      console.log(newInstanceOf(a, Object)) // true
      console.log(newInstanceOf(c, Foo)) // true
      console.log(newInstanceOf(d, Child)) // true
      console.log(newInstanceOf(d, Father)) // true
      console.log(newInstanceOf(123, Object)) // false
      console.log(123 instanceof Object) // false

limitations
1) It is required that the detected instance must be of object data type
2) Instances of basic data types cannot be detected based on it
Cannot detect if it is created in literal mode
Constructor can be detected
3) Whether it is an array Object or a regular Object, it is an instance of Object, and the detection result is TRUE. Therefore, it is impossible to judge whether it is an ordinary Object based on this result

3.constructor

1. Definition: judge whether the attribute value of the constructor of the current instance is an estimated class (detected by its instance data type)
2. Syntax: examples constructor = = = class
3. Return value: return TRUE if it belongs to, or FALSE if it does not belong to

let arr = [],
    obj = {},
    num = 10;
console.log(arr.constructor === Array); //=>true
console.log(arr.constructor === Object); //=>false
console.log(obj.constructor === Object); //=>true
console.log(num.constructor === Number); //=>true 

4.Object.prototype.toString.call()

Definition: find object The toString method on prototype allows the toString method to execute, and this in the method points to the detected data value based on call, so that data type detection can be realized
Principle:
1. The prototype of constructor of each data type has toString method;
2. Except object The toString on the prototype is used to return the information of the class to which the current instance belongs (to detect the data type), and the rest are converted into strings
3. Object instance toString(): THIS in the toString method is an object instance, that is, to detect its data type, that is, who is THIS, that is, to detect whose data type
4.Object.prototype.toString.call([value]) so we execute toString and change this to the data value to be detected based on call

      console.log(toString.call(10)); //=>"[object Number]"
      console.log(toString.call(NaN)); //=>"[object Number]"
      console.log(toString.call("xxx")); //=>"[object String]"
      console.log(toString.call(true)); //=>"[object Boolean]"
      console.log(toString.call(null)); //=>"[object Null]"
      console.log(toString.call(undefined)); //=>"[object Undefined]"
      console.log(toString.call(Symbol())); //=>"[object Symbol]"
      console.log(toString.call(BigInt(10))); //=>"[object BigInt]"
      console.log(toString.call({ xxx: "xxx" })); //=>"[object Object]"
      console.log(toString.call([10, 20])); //=>"[object Array]"
      console.log(toString.call(/^\d+$/)); //=>"[object RegExp]"
      console.log(toString.call(function () {})); //=>"[object Function]"