Usage and differences of the instanceof and typeof operators in JavaScript

Source: Internet
Author: User
Tags type null
This article mainly introduces the usage and differences of the instanceof and typeof operators in JavaScript. For more information, see instanceof and typeof in JavaScript ), however, they are used differently:

Typeof Operator
Returns a string that represents the expression's data type.

Typeof expression;

The expression parameter is an arbitrary expression that needs to be searched for type information.

Description
Typeof is a unary operator placed before an operation number.

The typeof operator returns the type information as a string. There are six possible types of typeof return values: "number", "string", "boolean", "object", "function", and "undefined ."

(ECMAScript has five primitive types, namely Undefined, Null, Boolean, Number, and String .)

Note:

1. We mentioned five primitive types of ECMAScript. When using the typeof operator, we need to differentiate the differences between "object type" and "object value" (literal value. For example, a Boolean object is a reference type of the Boolean primitive type, and true and false are two possible object values of the Boolean object. We can regard the pre-defined object of ECMAScript (relative to the class in other languages) as an encapsulation (or encapsulation) of the original value of the corresponding type ). All pre-defined objects of ECMAScript are inherited from Object objects. Therefore, the following situations exist:

The Code is as follows:


Var testvar = new Number (68 );
Alert (typeof testvar); // output "object"
Testvar = 68;
Alert (typeof testvar); // output "number"


Another example:

The Code is as follows:


Function Person (){}
Document. write ("
Typeof (Person): "+ typeof (Person); // function
Var person = new Person ();
Document. write ("
Typeof (person): "+ typeof (person); // object


Note:Traditionally, ECMAScript does not really have classes. In fact, except that there is no class, there is no "class" in the ECMA-262. ECMAScript defines "object definitions", which are logically equivalent to classes in other programming languages.

In addition, these pre-defined objects overwrite the ValueOf () method of the Object and return its original value. All the attributes and methods of these objects can be applied to the original values of the corresponding type, because they are pseudo objects.

2. If the typeof operator is null, "Object" is returned ". This is actually an error in the initial implementation of JavaScript, which is followed by ECMAScript. Now null is considered a placeholder for an object, which explains this contradiction, but technically it is still the original value.

Tip:

1. The undefined value is not the same as the undefined value. However, the typeof operator does not really distinguish the two values.Consider the following code:

Var oTemp;
Alert (typeof oTemp); // output "undefined"
Alert (typeof oTemp2); // output "undefined"

The previous Code outputs "undefined" for both variables, even if only the variable oTemp2 has never been declared. If you use an operator other than typeof for oTemp2, it will cause an error because other operators can only be used for declared variables.

2. When the function does not return a specific value, the returned value is also "undefined", as shown below:

Function testFunc (){}
Alert (testFunc () = undefined); // output "true" 3. Type Null. It has only one special value null, that is, its literal volume. The undefined value is actually derived from the null value, so ECMAScript defines them as equal.

Alert (null = undefined); // outputs "true"
Although these two values are equal, they have different meanings:

Undefined is a variable that declares a variable but does not assign the value or has not been declared to it during initialization (it can only be used for typeof, the compiler automatically declares the value as a global variable when it is used as the value assignment target ).

Null indicates an existing object (that is, the object is null or cannot be found ). If a function or method returns an object, null is usually returned if the object cannot be found.

3. We can use typeof to obtain whether a variable exists, such as if (typeof! = "Undefined") {alert ("OK")}, instead of using if (a) because an error occurs if a does not exist (not declared.

For special objects such as Array and Null, all objects are returned using typeof, which is the limitation of typeof. If you want to obtain whether an object is an array or determine whether a variable is an instance of an object, you must use instanceof.


Instanceof Operator
When using the typeof operator to store values of the reference type, a problem occurs. No matter what type of object is referenced, it returns "object ". ECMAScript introduces another Java operator instanceof to solve this problem.

The instanceof operator is similar to the typeof operator and is used to identify the type of the object being processed. Unlike the typeof method, the instanceof method requires developers to explicitly confirm that the object is of a specific type. For example:

Var oStringObject = new String ("hello world ");
Alert (oStringObject instanceof String); // outputs "true"
This code asks "is the variable oStringObject A String object instance ?" OStringObject is indeed a String object instance, so the result is "true ". Although it is not as flexible as the typeof method, the instanceof method is still useful when the typeof method returns "object.

Instanceof Operator

Is a binary operator. Returns a Boolean value indicating whether the object is an instance of a specific class.

Expression instanceof class

Parameters

Expression is required. Any object expression.

Class is required. Any defined object class.

Description
If an object is an instance of class, the instanceof operator returns true. If the object is not an instance of the specified class, or the object is null, false is returned.

Used to determine whether a variable is an instance of an object,

For example, var a = new Array (); alert (a instanceof Array); returns true, and alert (a instanceof Object) returns true, because Array is a subclass of object.

For example, function test () {}; var a = new test (); alert (a instanceof test) returns true.

Note:

About function arguments, we may all think that arguments is an Array, but if you use instaceof to test it, we will find that arguments is not an Array object, although it looks very similar.

There are also similar situations, such:

Var a = new Array (); if (a instanceof Object) alert ('y'); else alert ('n'); get 'y'

But if (window instanceof Object) alert ('y'); else alert ('n'); get 'n'

Therefore, the instanceof object here refers to the object in js syntax, not the dom model object.

In this case, the use of typeof has some differences: alert (typeof (window) will get the object

Extended: What is the principle of the instanceof operator in JavaScript?

When learning js, you can use the instanceof operator, such as function Person (){}

Var person = new Person (); alert (person instanceof Person); // return true

So what is the result of the instanceof operation? true/false is returned?

Will the result be obtained by judging whether the internal pointer [[prototype] of Person. prototype and person references are the same?

In fact, if you can find the prototype object pointed to by the prototype attribute of the constructor in the prototype object chain of the instance, true is returned.

Prototype is not an attribute of the Instance (or the prototype attribute of the instance is undefined), but an attribute in the prototype object. If it is tampered with, this judgment method cannot be correctly returned.

In addition, can I directly determine person. constructor = Person to get the desired result?

Let's test the following JavaScript code:

The Code is as follows:


Function Person (name, sex) {this. name = name; this. sex = sex ;}
Document. write ("
Typeof Person: "+ typeof Person );
Document. write ("
Typeof Person. prototype: "+ typeof Person. prototype );
Document. write ("
Typeof Person. constructor: "+ typeof Person. constructor );

Var person = new Person ();
Document. write ("

Var person = new Person ();");
Document. write ("
Typeof person: "+ typeof person );
Document. write ("
Typeof person. prototype: "+ typeof person. prototype );
Document. write ("
Typeof person. constructor: "+ typeof person. constructor );

Document. write ("

Function. constructor: "+ Function. constructor );
Document. write ("

Function. prototype: "+ Function. prototype );

Document. write ("

Person. constructor: "+ Person. constructor );
Document. write ("

Person. prototype: "+ Person. prototype );


Document. write ("

Person. constructor: "+ person. constructor );
Document. write ("

Person. prototype: "+ person. prototype );

The output is as follows:

Typeof Person: function
Typeof Person. prototype: object
Typeof Person. constructor: function

Var person = new Person ();
Typeof person: object
Typeof person. prototype: undefined
Typeof person. constructor: function


Function. constructor: function Function () {[native code]}
Function. prototype: function Empty (){}

Person. constructor: function Function () {[native code]}
Person. prototype: [object Object]

Person. constructor: function Person (name, sex) {this. name = name; this. sex = sex ;}
Person. prototype: undefined

Similar to Function, Number () is the constructor of the Number object. Number () is used to convert its parameters to the number type and return the Conversion Result (if the conversion is not available, NaN is returned ).

Constructor is rarely used in JavaScript. variable. constructor returns the string representation of the constructor of its object class.

When determining the Data Type in JavaScript, we can use the following method to obtain the detailed data type:

If (typeof a = "object") & (a. constructor = Array )){
...
}

Note:Constructor can only judge existing variables, while typeof can judge undefined variables or empty objects ).

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.