How to judge the object type in javascript _ basic knowledge-js tutorial

Source: Internet
Author: User
The Object judgment methods frequently used in javascript include typeof, constructor, and Object. prototype. toString. call () recently looked at John Resig's masterpiece "Pro JavaScript Techniques" and talked about how to judge the javascript type. This article introduces two methods: typeof and constructor. Unfortunately, as the author of jquery, he did not introduce the type judgment method used by jquery. But it does not matter. I will summarize it here.

Here I first recommend a useful Online Editor:Http://jsfiddle.net/. He provides jquery, mootools, prototype, and YUI versions of mainstream js frameworks. You can use them directly when you need to compile a simple js testing program. The process of opening and editing software and creating various types of files is skipped. After editing the code, click the [Run] button.

1. typeof

Typeof is the most common method for determining types. It has the advantages of being simple and easy to remember. Its disadvantage is that it cannot be used to determine objects, null, array, regexp, and custom objects.

The following is my test code:

The Code is as follows:


Var str = 'str ';
Var arr = ['1', '2'];
Var num = 1;
Var bool = true;
Var obj = {name: 'test '};
Var nullObj = null;
Var undefinedObj = undefined;
Var reg =/reg /;

Function fn (){
Alert ('this is a function ');
}

Function User (name ){
This. name = name;
}
Var user = new User ('user ');

Console. log (typeof str );
Console. log (typeof arr );
Console. log (typeof num );
Console. log (typeof bool );
Console. log (typeof obj );
Console. log (typeof nullObj );
Console. log (typeof undefinedObj );
Console. log (typeof reg );
Console. log (typeof fn );
Console. log (typeof user );


Code running result:

2. constructor

The object constructor is an uncommon method. Its advantage is that it supports the determination of most object types, especially for custom objects; its disadvantage is that it cannot be used on null or undefined.

The test code is similar to the previous one. The difference is that XXX. constructor replaces typeof.

The Code is as follows:


Var str = 'str ';
Var arr = ['1', '2'];
Var num = 1;
Var bool = true;
Var obj = {name: 'test '};
Var nullObj = null;
Var undefinedObj = undefined;
Var reg =/reg /;
Function fn (){
Alert ('this is a function ');
}
Function User (name ){
This. name = name;
}
Var user = new User ('user ');

Console. log (str. constructor );
Console. log (arr. constructor );
Console. log (num. constructor );
Console. log (bool. constructor );
Console. log (obj. constructor );
Console. log (reg. constructor );
Console. log (fn. constructor );
Console. log (user. constructor );

Console. log (nullObj. constructor );
Console. log (undefinedObj. constructor );

Running result:

When running to console. log (nullObj. constructor);, the browser reports an error:Uncaught TypeError: Cannot read property 'constructor' of null. Similar problems occurConsole. log (undefinedObj. constructor); above:Uncaught TypeError: Cannot read property 'constructor' of undefined.

3. Object. prototype. toString. call ()

Finally, we will introduce the method used in jquery, Object. prototype. toString. call (). The advantage is that it supports the vast majority of types of judgments. The only drawback is that it does not support the judgment of custom objects.

The test code is as follows:

The Code is as follows:


Var str = 'str ';
Var arr = ['1', '2'];
Var num = 1;
Var bool = true;
Var obj = {name: 'test '};
Var nullObj = null;
Var undefinedObj = undefined;
Var reg =/reg /;
Function fn (){
Alert ('this is a function ');
}
Function User (name ){
This. name = name;
}
Var user = new User ('user ');

Var toString = Object. prototype. toString;

Console. log (toString. call (str ));
Console. log (toString. call (arr ));
Console. log (toString. call (num ));
Console. log (toString. call (bool ));
Console. log (toString. call (obj ));
Console. log (toString. call (reg ));
Console. log (toString. call (fn ));
Console. log (toString. call (user ));
Console. log (toString. call (nullObj ));
Console. log (toString. call (undefinedObj ));

Running result:

Console. log (toString. call (user); returns [object Object]. Further judgment is not allowed.

Summary

The Object judgment methods frequently used in javascript include typeof, constructor, and Object. prototype. toString. call (). Typeof is a syntax supported by JavaScript itself. Constructor is rarely used, but I believe you can understand what it means through demo. As for Object. prototype. toString. call (), it may be a bit confusing. What is the difference between it and XXX. toString ()? Why cannot I directly use XXX. toString?

Run the following code in the browser: view the running result:

Null and undefined because the toString () method does not exist, an error is reported, so we will ignore them. For other objects, the returned content through toString () is very different from the content returned using Object. prototype. toString. call. This is because the Object. prototype. toString () method is designed to return the Object type. String, Array, Boolean, Regexp, Number, and Function all inherit from the Object, and also inherit the prototype method toString () of the Object, but they all override toString. When xxx. toString () is executed, the overwritten method is used. The returned result is inconsistent with that of Object. prototype. toString. call.

Through the above example, you must have a deeper understanding of these three methods, be familiar with their advantages and disadvantages, and then select the appropriate method as needed. Object is recommended. prototype. toString. call () method, because it can solve the judgment in most cases. When the returned value is [object Object], constructor is used to help determine whether it is a custom object.

The Code is as follows:


Var str = 'str ';
Var arr = ['1', '2'];
Var num = 1;
Var bool = true;
Var obj = {name: 'test '};
Var nullObj = null;
Var undefinedObj = undefined;
Var reg =/reg /;
Function fn (){
Alert ('this is a function ');
}
Function User (name ){
This. name = name;
}
Var user = new User ('user ');

Console. log (str. toString ());
Console. log (arr. toString ());
Console. log (num. toString ());
Console. log (bool. toString ());
Console. log (obj. toString ());
Console. log (reg. toString ());
Console. log (fn. toString ());
Console. log (user. toString ());
Console. log (nullObj. toString ());
Console. log (undefinedObj. toString ());

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.