JavaScript instanceof Operator Learning Tutorial

grammar

object instanceof constructor

parameter
object:
Object to be detected.
constructor:
A constructor

Description:
The instanceof operator is used to detect whether constructor.prototype exists in the prototype chain of the parameter object.

//  Define Constructor 
function C(){} 
function D(){} 

var o = new C();

// true Because  Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false Because  D.prototype Be not in o On prototype chain 
o instanceof D; 

o instanceof Object; // true, because Object.prototype.isPrototypeOf(o) Return true
C.prototype instanceof Object // true, Ditto 

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype Pointing 1 Null Objects , This empty object is not present o On prototype chain .

D.prototype = new C(); //  inherit 
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

It is important to note that if the expression obj instanceof Foo returns true, it does not mean that the expression will always return ture, because the value of the Foo.prototype attribute may change, and it is very likely that the changed value will not exist in the prototype chain of obj, in which case the value of the original expression will become false.In another case, the value of the original expression will change, that is, to change the prototype chain of the object obj, although in the current ES specification, we can only read the prototype of the object and not change it, but with the help of nonstandard uproto_uMagic properties are achievable.For example, execute obj. uproto_u = {}After that, obj instanceof Foo will return to false.

instanceof and Multiple Global Objects (Interaction between multiple frames or multiple windows)

In browsers, our scripts may need to interact between multiple windows.Multiple windows mean multiple global environments with different global objects and thus different built-in type constructors.This may cause some problems.For example, the expression [] instanceof window.frames[0]. Array returns false because Array.prototype!==window.frames[0].Array.prototype, so you must use Array.isArray (myObj) or Object.prototype.toString.call (myObj) === "[object Array]" to determine if myObj is an array.

Example
The general usage of instanceof is to determine if a is of type b:

console.log(true instanceof Boolean); // false 
console.log(new Number(1) instanceof Number); // true

instanceof can also determine the parent type:

function Father() {}
function Child() {}
Child.prototype = new Father();
var a = new Child();
console.log(a instanceof Child); // true
console.log(a instanceof Father); // true

The Child constructor inherits from Father, and the instance a is undoubtedly an Child construct, but why is it also an instance of Father?The kernel of the instanceof operator can be simply described in the following code:

function check(a, b) {
 while(a.__proto__) {
  if(a.__proto__ === b.prototype)
   return true;
  a = a.__proto__;
 }
 return false;
}

function Foo() {}
console.log(Object instanceof Object === check(Object, Object)); // true 
console.log(Function instanceof Function === check(Function, Function)); // true 
console.log(Number instanceof Number === check(Number, Number)); // true 
console.log(String instanceof String === check(String, String)); // true 
console.log(Function instanceof Object === check(Function, Object)); // true 
console.log(Foo instanceof Function === check(Foo, Function)); // true 
console.log(Foo instanceof Foo === check(Foo, Foo)); // true

Simply put, if a is an instance of b, then a can definitely use the methods and attributes defined in prototype of b, then the code representation is that b.prototype has the same value in the prototype chain of a, so follow the prototype chain of a layer by layer.

It is also worth noting that String Number Boolean and Function are functions, while the functions are constructed by Function. Like any simple function 1, so can use prototype properties on Function:

Function.prototype.a = 10;
console.log(String.a); // 10

Finally, let's briefly talk about the first two topics.

 //  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

//  For ease of expression, first distinguish the left expression from the right expression 
 StringL = String, StringR = String; 
 //  Following is a step-by-step specification 
 O = StringR.prototype = String.prototype 
 L = StringL.__proto__ = Function.prototype 
 //  No. 1 Secondary Judgment 
 O != L
 //  Loop Find Again  L  Are there any more  __proto__ 
 L = String.prototype.__proto__ = Object.prototype 
 //  No. 2 Secondary Judgment 
 O != L 
 //  Recycle Find  L  Are there any more  __proto__ 
 L = String.prototype.__proto__ = null 
 //  No. 3 Secondary Judgment 
 L == null 
 //  Return  false