Review data types

typeof

Definition: An operator that detects data types

Syntax: tyepof [value]

Return value: is a string containing the corresponding data type

  • The result of typeof detection is first a string;
  • The string contains the corresponding data type (e.g. “number”, “string”, “Boolean”, “undefined”, “object”, “function”, “symbol”, “bigint”)
  • Typeof typeof typeof [12,20,30]=>’string’

Because the result of typeof is always a string (the string contains the corresponding type), two or more typeof checks in a row result in “string”.

typeof []===>"object"
typeof typeof []===>"string"
Copy the code

Principle: Detects according to binary values

  • 000: object
  • 1: the integer
  • 010: a floating point number
  • 100: string
  • 110: Boolean
  • undefined:-2^30
  • Null: all is zero

Advantages: High detection performance

Disadvantages: Can’t subdivide objects

  • Detects the value of the original value object, resulting in “object”

  • Funciton is function. The other object types (array, regular, and ordinary objects) are all objects, so typeof detection cannot be subdivided.

  • Why does typeof function check for “function” because function checks an object to see if it calls the call method

  • If a variable is not declared, it will be undefined based on typeof. If a variable is not declared, it will be undefined based on let.

  • typeof null -> “object”

Typeof null=>”object” typeof {name:’ orientalmiaomiao ‘}

Click on me to learn about browsers for various data types and questions about base

Because null is detected according to binary and the first three digits of the object are the same

Typeof detects data types based on the binary values stored at the bottom of the computer. It considers that everything starting with 000 is an object, while null is all zero, so it is recognized as an object. However, it is not an object

exercises

typeof "zhufeng" ====> "string" typeof 12 ===> "number" typeof false ===>"boolean" typeof true ====> "boolean" typeof Null ====>" object" typeof undefined ====>"undefined" typeof Symbol()=>" Symbol "typeof 456n=>"bigint" Typeof [1,2] =====>"object" typeof function(){} =>"function"Copy the code

instanceof

Definition: checks whether the current instance belongs to this class

Syntax: [value] instanceof [Ctor]

Return true for belonging, false for not belonging

  • The result is TRUE as long as the currently detected constructor (its prototype object) appears on the instance’s prototype chain.
  • If Object. Prototype is not found, then FALSE;

Benefits: Subdivide object data type values

  • To check whether the value is an Array, simply look for an instance of the Array class
  • “But just because the result is TRUE doesn’t mean it’s a standard common object.”

Disadvantages:

  • Values of primitive value types cannot be detected “but instances of object formats corresponding to primitive values can be detected”;
  • But because the prototype chain direction can be arbitrarily changed, so the final detection result may not be accurate;
let arr = [10, 20, 30]; console.log(arr instanceof Array); //=>true console.log(arr instanceof RegExp); //=>false console.log(arr instanceof Object); Console. log(new Number(1) instanceof Number); console.log(new Number(1) instanceof Number); //=>true console.log(1 instanceof Number); //=>false Indicates that raw value types cannot be detectedCopy the code

Underlying principle processing

f instanceof Fn -> Fn[Symbol.hasInstance](f) Function.prototype[Symbol.hasInstance]=function... All functions are instances of this class Function and all functions have this propertyCopy the code

The Symbol. HasInstance property of the constructor cannot be modified directly in the normal form, but it can be modified in ES6 syntax. With this mechanism, you can override the default result to change it into the desired result

/ / the longhand constructor = = = = = = = = = = = = = = = = = = / / function Fn () {}; //Fn[Symbol.hasInstance]=function(){}; ƒ [symbol.hasinstance]() {[native code]} //let f = new Fn; //console.log(f instanceof Fn); //=>true //console.log(Fn[Symbol.hasInstance](f)); / / = > true / / ES6 writing = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = class Fn {static [Symbol.hasInstance](obj) { console.log('OK'); if (Array.isArray(obj)) return true; return false; }}; let f=new Fn(); let arr = [10, 20, 30]; console.log(f instanceof Fn); //=>false console.log(arr instanceof Fn); //=>trueCopy the code

Rewrite instanceof yourself

The instanceof right-hand side must be an object or a function object and must have a Prototype

Const instance_of = function instance_of(obj, const instance_of) Ctor) { if (Ctor == null) throw new TypeError('Right-hand side of instanceof is not an object'); let type = typeof Ctor; //=> if (! /^(object|function)$/i.test(type)) throw new TypeError('Right-hand side of instanceof is not an object'); //=> not function if (! /^function$/i.test(type)) throw new TypeError('Right-hand side of instanceof is not callable'); //=> check if there is no prototype for example, arrow function has no prototype if (! Ctor.prototype) throw new TypeError('Function has non-object prototype in instanceof check'); let proto = Object.getPrototypeOf(obj); If (proto === Ctor. Prototype) return true; // If (proto === Ctor. Prototype) return true; proto = Object.getPrototypeOf(proto); } return false; }; // Pass instance and constructor console.log(instance_of([], Array)); //=>true console.log(instance_of([], RegExp)); //=>false console.log(instance_of(1, Number)); //=>true console.log(instance_of(Symbol(), Symbol)); //=>true console.log(instance_of([],{})); / / an errorCopy the code

constructor

Definition: Determines whether the constructor property value of the current instance is a predicted class

Constructor === class

Return value: TRUE if it belongs, FALSE if it does not belong

advantages

  • Constructor = the current class itself

(Provided constructor has not been destroyed)

  • Ability to detect basic data types

Limitations: The prototype of the current class cannot be redirected, resulting in inaccurate detection results

let arr=[], n=10, m=new Number(10); console.log(arr.constructor===Array); //=>true console.log(arr.constructor===RegExp); Console. log(arr.constructor===Object); //=>false console.log(n.constructor===Number); //=>true console.log(m.constructor===Number); //=>true function Fn(){ }; let f=new Fn; // before changing redirection // console.log(f.constructor===Fn); //=>true // console.log(f.constructor===Object); //=>false Fn.prototype={}; Constructor console.log(f.constructor===Fn); //=>false console.log(f.constructor===Object); //=>trueCopy the code

Object.prototype.toString.call()

Pros: This is the only JS that detects data types without any flaws

Grammar:

  • Object.prototype.toString([value]);
  • ({}).toString.call(detected instance)

Return value: is a string “[object class of the currently detected instance]”

  • [object Number/String/Boolen/Null/Undefined/Symbol/BigInt/Object/Function/Array/RegExp/Date/Math/Error…] “

Most of the built-in classes have toString methods on their prototypes, which are usually converted to strings,

  • Such as: Array prototypeNumber. Prototype/Boolean. Prototype/Function. The prototype…
  • In addition to the Object. The prototype. ToString is testing data type, the return value contains own constructor information…
/ / by this is better than typeof Object. The prototype. ToString. Call (1); //=>"[object Number]" Object.prototype.toString.call(new Number); //=>"[object Number]"Copy the code
Object.prototype.toString.call(1); //"[object Number]" Object.prototype.toString.call(''); //"[object String]" Object.prototype.toString.call(true); //"[object Boolean]" Object.prototype.toString.call(null); //"[object Null]" Object.prototype.toString.call(undefined); //"[object Undefined]" Object.prototype.toString.call(Symbol()); //"[object Symbol]" Object.prototype.toString.call(12n); //"[object BigInt]" Object.prototype.toString.call(/\d+/); //"[object RegExp]" Object.prototype.toString.call([]); //"[object Array]" Object.prototype.toString.call(()=>{}); //"[object Function]" Object.prototype.toString.call({}); //"[object Object]" Object.prototype.toString.call(Math); //"[object Math]" Object.prototype.toString.call(function*(){}); //"[object GeneratorFunction]"Copy the code

The principle of

  • ([]).toString() calls array.prototype toString, which is converted to a string
  • ({}).toString() calls Object. Prototype toString();
  • Object. The prototype. ToString. Call ([value]). We need to turn the Object prototype. ToString implementation, based on the call method to change this
  • ({}).toString.call(10)=>”[object Object]”

Rules for returning values

  • This typically returns information about the constructor to which the current instance belongs
  • But if the instance object has the Symbol. ToStringTag attribute, whatever the attribute value is, is returned
Math [Symbol toStringTag] = "Math" = > Object. The prototype. ToString. Call (Math) "[Object Math]"Copy the code
/ / class Fn {}; //let f=new Fn; //console.log(Object.prototype.toString.call(f)); Class Fn {// constructor() {// this[symbol.tostringTag] = 'Fn'; // } [Symbol.toStringTag] = 'Fn'; } let f = new Fn; // console.log(Object.prototype.toString.call(Fn)); . / / "[object Function]" the console log (object. The prototype. ToString. Call (f)); / / "[object Fn]"Copy the code

conclusion