Four methods of using JS to determine data types

Preface

Data type judgment in Javascript is actually a very basic problem in JavaScript, but it is a very common problem both in daily programming and in interviews.

In the ECMAScript specification, a total of 7 data types are defined, which are divided into two categories: basic types and reference types, as shown below:

Basic types: String, Number, Boolean, Symbol, Undefined, Null

Reference type: Object

Basic types are also called simple types. Since they occupy a fixed space and are simple data segments, they are stored in the stack to increase the speed of variable query, that is, accessed by value.

Reference types are also called complex types. Since the size of their values ​​will change, they cannot be stored in the stack, otherwise it will slow down the variable query speed. Therefore, their values ​​are stored in the heap, and the value stored in the variable is a pointer to the memory where the object is stored, that is, access by address. In addition to Object, reference types also include Function, Array, RegExp, Date, etc.

Since ECMAScript is loosely typed, there needs to be a way to detect the data type of a given variable. JavaScript also provides a variety of methods for this problem, but unfortunately, different methods produce mixed results.

The following introduces four commonly used methods and briefly analyzes the problems existing in each method.

1. typeof

typeof is an operator that takes a unary expression on its right side and returns the data type of that expression. The returned result is expressed in the form of a string of that type (all lowercase letters), including the following 7 types: number, boolean, symbol, string, object, undefined, function, etc.

typeof''; // string is valid typeof1; // number is valid typeofSymbol(); // symbol is valid typeoftrue; //boolean is valid typeofundefined; //undefined is valid typeofnull; //object is invalid typeof[]; //object is invalid typeofnewFunction(); // function is valid typeofnewDate(); //object is invalid typeofnewRegExp(); //object is invalid

Sometimes the typeof operator returns confusing but technically correct values:

• For basic types, except null, correct results can be returned.
• For reference types, except function, the object type is always returned.
• For null, returns object type.
• For function, returns the function type.
  

Among them, null has its own data type Null, and arrays, dates, and regular expressions in reference types also have their own specific types. When typeof processes these types, it only returns the Object type at the top of its prototype chain, which is correct, but not the result we want.

2. instanceof

Instanceof is used to determine whether A is an instance of B. The expression is: A instanceof B. If A is an instance of B, it returns true, otherwise it returns false. It is important to note here that instanceof detects the prototype. We use a pseudocode to simulate its internal execution process:

instanceof (A,B) = {
    varL = A.__proto__;
    varR = B.prototype;
    if(L === R) {
        // A's internal property __proto__ points to B's prototype object returntrue;
    }
    returnfalse;
}

From the above process, we can see that when A's __proto__ points to B's prototype, A is considered to be an instance of B. Let's look at a few more examples:

[] instanceof Array; // true
{} instanceof Object; // true
newDate() instanceof Date; // true
 
function Person(){};
newPerson() instanceof Person;
 
[] instanceof Object; // true
newDate() instanceof Object; // true
newPerson instanceof Object; // true

We found that although instanceof can determine that [] is an instance of Array, it thinks that [] is also an instance of Object. Why?

Let's analyze the relationship between [], Array, and Object:

From instanceof, we can tell that [].__proto__ points to Array.prototype, and Array.prototype.__proto__ points to Object.prototype. Finally, Object.prototype.__proto__ points to null, marking the end of the prototype chain. Therefore, [], Array, and Object form a prototype chain internally:

From the prototype chain, we can see that __proto__ of [] directly points to Array.prototype and indirectly points to Object.prototype, so according to the judgment rule of instanceof, [] is an instance of Object. By analogy, similar new Date() and new Person() will also form a corresponding prototype chain. Therefore, instanceof can only be used to determine whether two objects are in an instance relationship, but cannot determine the specific type of an object instance.

The problem with the instanceof operator is that it assumes there is only one global execution context. If a web page contains multiple frames, there are actually more than two different global execution environments, and thus more than two different versions of the constructor. If you pass an array from one framework to another, the passed array has a separate constructor than the array created natively in the second framework.

variframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[0].Array;
vararr = newxArray(1,2,3); // [1,2,3]
arr instanceof Array; // false

To solve this problem of arrays, ES5 provides the Array.isArray() method. This method is used to confirm whether an object itself is of Array type, regardless of the environment in which the object is created.

if(Array.isArray(value)){
   //Perform some operation on the array}

Array.isArray() essentially detects the [[Class]] value of an object. [[Class]] is an internal property of an object that contains the type information of the object. Its format is [object Xxx], where Xxx is the corresponding specific type. For arrays, the value of [[Class]] is [object Array].

3. Constructor

When a function F is defined, the JS engine adds a prototype to F, then adds a constructor property to the prototype and lets it point to a reference to F. As shown below:

When executing var f = new F(), F is considered as a constructor, and f is an instance object of F. At this time, the constructor on the F prototype is passed to f, so f.constructor == F

It can be seen that F uses the constructor on the prototype object to reference itself. When F is used as a constructor to create an object, the constructor on the prototype is inherited to the newly created object. From the perspective of the prototype chain, the constructor F is the type of the new object. The significance of doing this is to allow new objects to have traceable data types after they are born.

Likewise, JavaScript's built-in objects are constructed internally this way:

Details:

1. null and undefined are invalid objects, so there will be no constructor. These two types of data need to be judged by other means.

2. The function constructor is unstable. This is mainly reflected in custom objects. When the developer rewrites the prototype, the original constructor reference will be lost and the constructor will default to Object.

Why did it become Object?

Because prototype is reassigned to a { }, which is the literal value of new Object(), new Object() will pass the constructor on the Object prototype to { }, which is Object itself.

Therefore, in order to standardize development, it is generally necessary to reassign the constructor when rewriting the object prototype to ensure that the type of the object instance is not tampered with.

4. toString

toString() is the prototype method of Object. When this method is called, it returns the [[Class]] of the current object by default. This is an internal property with the format [object Xxx] where Xxx is the type of the object.

For Object objects, simply calling toString() will return [object Object]. For other objects, they need to be called through call / apply to return the correct type information.

Object.prototype.toString.call('') ; // [object String]
Object.prototype.toString.call(1); // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(newFunction()) ; // [object Function]
Object.prototype.toString.call(newDate()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(newRegExp()) ; // [object RegExp]
Object.prototype.toString.call(newError()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window is a reference to the global object global

Summarize

This is the end of this article about using JS to determine data types. For more relevant JS data type determination content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!