Usually explain

In JS, typeof is used for primitive types, and instanceof is used for reference types

But do you really know instanceof?

example

Let’s do a couple of examples to warm up a little bit

Console. log('aa' instanceof String) // let obj_string = new String('aa'); console.log(obj_string instanceof String)Copy the code
Log ({} instanceof object) console.log([] instanceof Array) console.log([] instanceof object) console.log([] instanceof object) console.log(function() {} instanceof Function) console.log(function() {} instanceof Object)Copy the code
function Foo(){} function BFoo(){} Foo.prototype = new BFoo(); //JavaScript archetype inheritance let foo = new foo (); console.log(foo instanceof Foo); console.log(foo instanceof BFoo);Copy the code

In fact, the above three examples are relatively basic, I believe that they are not difficult to you, let’s look at a few more complicated

console.log(String instanceof String); 
console.log(Object instanceof Object); 
console.log(Function instanceof Function); 
console.log(Function instanceof Object);

function Foo(){} 
function BFoo(){} 
Foo.prototype = new BFoo();
console.log(Foo instanceof Function);
console.log(Foo instanceof Foo);Copy the code

Print them out. Did you get them all right? Yes, you don’t need to look down, god please return; If not, scroll down

The definition of MDN

instanceof – JavaScript | MDN

object instanceof constructor

The instanceof operator tests whether an object has a constructor’s Prototype property in its prototype chain.

If the constructor can find the prototype properties of the object on the prototype chain (up the __proto__ line), then the constructor can find the prototype properties of the object.

Let’s just look at the implementation code

Function instance_of(L, R) {constructor const R_P = r.protoType; // take the explicit prototype of R L = l.__proto__; While (true) {if (L === null) return false; while (true) {if (L === null) return false; If (R_P === L) return true; L = L.__proto__; }}Copy the code

And present our prototype chain killer

Rowed a point

  1. __proto__Property that points to the prototype of the constructor that created the object
  2. All JS objects have it__proto__Attributes, exceptObject.prototype.__proto__ === null
  3. Pay attention toObject()And it is made offunctionIt’s generated, so it’s__proto__The property points tofunctionThe constructorFunctionThe prototype of theFunction.prototype
  4. Notice the constructorFunctionIt’s the only oneprototypeand__proto__Point to the same object
  5. In general, we create our own builders on a daily basisFoothe__proto__Attribute points tofunctionThe constructorFunctionThe prototype of theFunction.prototype, but the constructor’s prototype objectFoo.prototypethe__proto__Property is direct toObject.prototypeThe object’s

Example: Clear out instanceof

So let’s just look for an example, and I’m sure you’re smart enough to understand it

console.log(Object instanceof Object); // trueCopy the code

Look at the instanceof implementation code

Function instance_of(L, R) {constructor const R_P = r.protoType; // take the explicit prototype of R L = l.__proto__; While (true) {if (L === null) return false; while (true) {if (L === null) return false; If (R_P === L) return true; L = L.__proto__; }}Copy the code

1. The first round of assignment

First, left and right expression assignment

L = Object
R = Object
R_P = Object.prototype = Object.prototype
L = Object.__proto__ = Function.prototypeCopy the code

2, the first judgment

L ! == null => R_P ! == L decides not to continue looking for L’s prototype chain for true, and prepares for the next round of assignment

3. Second round of assignment

L = Function.prototype.__proto__  =  Object.prototypeCopy the code

4. Second judgment

L ! == null => R_P === L

return trueCopy the code

Perfect finish!

Ok, for other examples, please analyze them yourself. You can now go out and say to someone: I really know instanceof!