Instances illustrating the use of the instanceof operator in JavaScript
- 2021-06-28 08:46:14
- OfStack
Introduction to instanceof Operator
In JavaScript, the typeof operator is used to determine the type of a variable. When using the typeof operator, there is a problem with storing values using the reference type, which returns "object" regardless of the type of object being referenced.ECMAScript introduced another Java operator, instanceof, to solve this problem.The instanceof operator is similar to the typeof operator in that it identifies the type of object being processed.Unlike the typeof method, the instanceof method requires the developer to explicitly confirm that the object is of a specific type.For example:
Listing 1. instanceof example
var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // output "true"
This code asks, "Is the variable oStringObject an instance of an String object?"oStringObject is really an instance of the String object, so the result is "true".Although not as flexible as the typeof method, the instanceof method is useful when the typeof method returns "object".
General usage of the instanceof operator:
Usually, using instanceof is to determine if an instance belongs to a certain type.For example:
Listing 2. instanceof General Usage
// judge foo Is it Foo Instances of classes
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true
In addition, the more important point is that instanceof can be used in an inheritance relationship to determine whether an instance belongs to its parent type.For example:
Listing 3. Usage of instanceof in Inheritance Relationships
// judge foo Is it Foo Instances of classes , And whether it is an instance of its parent type
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript Prototype Inheritance
var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true
The above code identifies the parent class in a layer of inheritance relationship, and the instanceof operator also applies in a layer of inheritance relationship.
Do you really know the instanceof operator?
Looking at the code examples above, do you think the instanceof operator is simple? Here's a look at the complex usage.
Listing 4. instanceof complex usage
console.log(Object instanceof Object);//true
console.log(Function instanceof Function);//true
console.log(Number instanceof Number);//false
console.log(String instanceof String);//false
console.log(Function instanceof Object);//true
console.log(Foo instanceof Function);//true
console.log(Foo instanceof Foo);//false
Have you looked at the code above and been dizzy again?Why are Object and Function instanceof themselves equal to true, while other types of instanceof themselves are not equal to true?How to explain?To understand the mystery of instanceof fundamentally, two things are needed: 1. How this operator is defined in the language specification.2, JavaScript prototype inheritance mechanism.
Listing 5. JavaScript instanceof operator code
function instance_of(L, R) {//L Represents a left expression, R Represents a right expression
var O = R.prototype;// take R Display Prototype
L = L.__proto__;// take L Implicit prototype of
while (true) {
if (L === null)
return false;
if (O === L)// Here's the main point: when O Strictly Equal L When, return true
return true;
L = L.__proto__;
}
}
Listing 6. Object instanceof Object
// For ease of expression, first distinguish the left expression from the right expression
ObjectL = Object, ObjectR = Object;
// Following is a step-by-step specification
O = ObjectR.prototype = Object.prototype
L = ObjectL.__proto__ = Function.prototype
// No. 1 Secondary Judgment
O != L
// Loop Find L Are there any more __proto__
L = Function.prototype.__proto__ = Object.prototype
// No. 2 Secondary Judgment
O == L
// Return true
Listing 7. Function instanceof Function
// For ease of expression, first distinguish the left expression from the right expression
FunctionL = Function, FunctionR = Function;
// Following is a step-by-step specification
O = FunctionR.prototype = Function.prototype
L = FunctionL.__proto__ = Function.prototype
// No. 1 Secondary Judgment
O == L
// Return true
Listing 8. Foo instanceof Foo
// For ease of expression, first distinguish the left expression from the right expression
FooL = Foo, FooR = Foo;
// Following is a step-by-step specification
O = FooR.prototype = Foo.prototype
L = FooL.__proto__ = Function.prototype
// No. 1 Secondary Judgment
O != L
// Loop Find Again L Are there any more __proto__
L = Function.prototype.__proto__ = Object.prototype
// No. 2 Secondary Judgment
O != L
// Recycle Find L Are there any more __proto__
L = Object.prototype.__proto__ = null
// No. 3 Secondary Judgment
L == null
// Return false
A Brief Analysis of instanceof's Application in Dojo Inheritance Mechanism
There is no multiple inheritance of this concept in JavaScript, just like Java 1.However, when declare is used in Dojo to declare classes, inheritance from multiple classes is allowed.The following is an example of Dojo 1.6.1.
Listing 9. Multiple Inheritance in Dojo
dojo.declare("Aoo",null,{});
dojo.declare("Boo",null,{});
dojo.declare("Foo",[Aoo,Boo],{});
var foo = new Foo();
console.log(foo instanceof Aoo);//true
console.log(foo instanceof Boo);//false
console.log(foo.isInstanceOf(Aoo));//true
console.log(foo.isInstanceOf(Boo));//true
In the example above, Foo inherits from both Aoo and Boo, but when the instanceof operator is used to check whether foo is an instance of Boo, it returns false.In fact, inside Dojo, Foo still inherits only from Aoo, and the methods and properties in the Boo class are copied to Foo through the mixin mechanism, so when the instanceof operator is used to check whether it is an instance of Boo, false is returned.So Dojo added a new method called isInstanceOf to each class instance to check for multiple inheritance.