How to detect various types of JavaScript

1. First introduce the 5 original types

5 primitive types in JavaScript are string , number , boolean , undefined , null

 var name = "Jack";var age = 32;var single = false;var app; //undefinedconsole.log(typeof name); //stringconsole.log(typeof age); //numberconsole.log(typeof single); //booleanconsole.log(typeof app); //undefinedconsole.log(typeof null); //object

It was found that the other four basic types except null can be identified by typeof :

 if(typeof name === "string") { name += "Zhang"; }if(typeof age === "number") { age++; }if(typeof single === "boolean" && single) { … }if(typeof app === "undefined") { app = {}; }

Because typeof null will get object, use === to detect null directly:

 if(el === null) { … }

2. Object

JavaScript objects include built-in objects ( Date, RegExp, Error , etc.) and custom objects .

(Note that although Function and Array are also built-in objects, they are discussed separately in the next section)

Objects cannot be detected using typeof like basic types, because the detected results are all object :

 console.log(typeof new Date()); //objectconsole.log(typeof new RegExp()); //objectconsole.log(typeof new Error()); //objectconsole.log(typeof new Person()); //objectconsole.log(typeof new Person()); //using typeof to detect that the custom object is also object

To use instanceof instead to detect:

 var date = new Date();var reg = new RegExp();var err = new Error();var me = new Person(); if(date instanceof Date) { //Detection date year = date.getFullYear(); }if(reg instanceof RegExp) { //Detection regular expression reg.test(...); }if(err instanceof Error) { //Detection exception throw err; }if(me instanceof Person) { //Detection custom object... }

But there is a problem with custom objects, assuming that Person is defined in both frameA and frameB of the browser. The me object is defined in frameA, and it is detected as true using me instanceof Person . But when the custom object me is passed to frameB, instanceof will be false in frameB.

As mentioned at the beginning of this section, although Function and Array are also built-in objects, they are left to the next section. The reason is that Function and Array also have the same above problems as custom objects. Therefore, Function and Array generally do not use instanceof

3. Function

The above said that using instanceof detection function cannot cross frames. Therefore, typeof is used to detect, which can be cross-frame:

 var func = function(){};if(typeof func === 'function') { … }

However, IE8 used typeof to detect DOM functions and would get an object, so IE8 used in:

 console.log(typeof document.getElementById); //object, not functionconsole.log(typeof document.getElementsByTagName); //object, not functionconsole.log(typeof document.createElement); //object, not function//IE browsers before IE8, use in to detect whether the DOM function is supported if("getElementById" in document) { … } if("getElementsByTagName" in document) { … } if("getElementsByTagName" in document) { … } if("createElement" in document) { … }

4. Array

The above said that using instanceof to detect that Array cannot cross frames. Before ES5, we have customized detection methods. The most accurate method: toString that depends on Array will return the fixed string "[Object Array]" to detect :

 function isArray(arr) { return Object.prototype.toString.call(arr) === "[Object Array]";}

This method is precise and elegant, so it was adopted by many libraries. Finally, Array was introduced as an isArray method in ES5, referring to MDN. Now you don’t need to customize the detection method, just use isArray() .

Other detection methods have their own defects and cannot be 100% accurate. But as a way of thinking, it can be learned from it. For example, relying on the fact that Array is the only object containing the sort method is detected:

 function isArray(arr) { return typeof arr.sort === "function";}

If the sort method is also defined for a custom object, the method will be invalid.

V. Attributes

Detect whether the property should be used in the instance object. If you don't care whether the attribute is in an instance object or in a prototype object, you can simply use in

For example, detect literal object properties:

 var Person = { name: "Jack", age: 33};if("name" in Person) { … } //trueif(Person.hasOwnProperty("name")) { … } //true

For example instance object properties:

 var Person = function (name, age) { this.name = name; this.age = age;};Person.prototype.location = "Shanghai";var me = new Person("Jack", 33)if("name" in me) { … } //trueif(me.hasOwnProperty("name")) { … } //trueif("location" in me) { … } //trueif(me.hasOwnProperty("location")) { … }//false

Other methods are not good:

 if (object[propName]) //Not Good, how do you know that the property value is not 0 or 1? if (object[propName] === null) //Not Good, how do you know that the property value is not null? if (object[propName] === undefined) //Not Good, how do you know that the property value is not undefined?

Summarize

Use typeof to detect string, number, boolean, undefined, function

Detect null with ===

Detect Array with isArray()

Use instanceof to detect built-in objects (except Function and Array) and custom objects

Use hasOwnProperty to detect whether the property is in the instance object. If you don't care whether the attribute is in an instance object or in a prototype object, you can simply use in

Okay, that's all for this article about how to detect various types of JavaScript. I hope everyone can study the content of this article carefully, which may be helpful for everyone to learn JavaScript.