Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the four methods of detecting data types in JavaScript. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

Foreword:

Before introducing the method of detecting data types, let's talk about what data types are in JavaScript.

JS data types are mainly divided into two categories: basic data types and reference data types.

Basic data types: number, string, boolean, null, undefined, symbol (es6)

Reference data type: object (array, function, date...)

For more information on data types, please click here.

There are four ways to detect data types:

Typeof

Instanceof

Constructor

Object.prototype.toString.call ()

1. Typeof

Syntax:

Typeof (variable) / / ortypeof variable

Example:

Console.log (typeof ""); / / stringconsole.log (typeof 1); / / numberconsole.log (typeof true); / / booleanconsole.log (typeof null); / / objectfully organized console.log (typeof undefined); / / undefinedconsole.log (typeof []); / / objectconsole.log (typeof function () {}); / / functionconsole.log (typeof console.log) / / functionconsole.log (typeof {}); / / objectconsole.log (typeof Symbol ()); / / symbol (es6) console.log (typeof 23423n); / / bigint (new version 67)

Summary:

The return type of typeof is a string. The values are: number, boolean, string, object, function, undefined, symbol, bigint

Typeof is generally used to determine basic data types, except that null will output "object". Everything else is correct.

When typeof judges the reference data type, it outputs "object" except that the function will output "function".

Note: here are two frequent interview questions!

The data type of null is object (null is an empty reference object and a placeholder)

The data type of console.log is function

For the determination of reference data types, using typeof is not accurate, so you can use instanceof to determine reference data types

2. Instanceof

Instanceof can accurately determine the reference data type. Its principle is to detect whether the prototype property of the constructor is on the prototype chain of an instance object.

Syntax:

Whether obj1 instanceof obj2 / / obj1 is an instance of obj2

Example:

Console.log (9 instanceof Number); / / falseconsole.log (true instanceof Boolean); / / falseconsole.log ('libo' instanceof String); / / falseconsole.log ([] instanceof Array); / / trueconsole.log (function () {} instanceof Function); / / trueconsole.log ({} instanceof Object) / / true// pay attention to the following two groups: console.log (typeof null); / / objectconsole.log (null instanceof Object); / / false!! console.log (typeof NaN); / / numberconsole.log (NaN instanceof Number); / / false!!

Summary:

Instanceof is used to judge the object, and the code form is [obj1 instanceof obj2] (obj2 must be an object, otherwise an error will be reported! )

Instanceof returns a Boolean value

Note:

Instanceof can only be used to determine whether two objects belong to an instance relationship, not to determine which type an object instance belongs to.

3. Constructor (constructor)

When a function F is defined, the JS engine adds a prototype prototype to F, then adds a constructor attribute to the prototype and points to a reference to F.

As follows:

When var f = new F () is executed, F is treated as a constructor, f is an instance object of F, and 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 the constructor to create the object, the constructor on the prototype is inherited to the newly created object. From the perspective of prototype chain, the constructor F is the type of the new object. The point of this is to make new objects have traceable data types after they are born.

Similarly, built-in objects in JavaScript do the same when built internally:

? Note:

Null and undefined are invalid objects, so they don't have constructor properties!

The constructor of the function is unstable, mainly because the developer can rewrite prototype, the original constructor reference will be lost, and constructor will default to Object.

Why did it become Object?

Because prototype is reassigned as a {}, which is the literal quantity of new Object (), new Object () passes the constructor on the Object prototype to {}, that is, Object itself.

Therefore, in order to standardize development, it is generally necessary to re-assign values to constructor when rewriting object prototypes to ensure that the types of object instances are not tampered with.

4. Object.prototype.toString.call ()

ToString () is the prototype method of Object, which is called and returns the [[Class] of the current object by default. This is an internal property in the format [object Xxx], where Xxx is the type of object.

For Object objects, a direct call to toString () returns [object Object]. For other objects, you need to call 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 (new Function ()); / / [object Function] Object.prototype.toString.call (new Date ()); / / [object Date] Object.prototype.toString.call ([]); / / [object Array] Object.prototype.toString.call (new RegExp ()) / / [object RegExp] Object.prototype.toString.call (new Error ()); / / [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. These are the four methods for detecting data types in JavaScript shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.