Of Stack

JavaScript Manual Implementation of instanceof

  • 2021-12-04 09:21:48
  • OfStack

1. Usage of instanceof

instanceof Operator is used to detect the constructor's prototype Property appears on the prototype chain of an instance object. 


function Person() {}
function Person2() {}

const usr = new Person();

console.log(usr instanceof Person); // true
console.log(usr instanceof Object); // true

console.log(usr instanceof Person2); // false

As in the code above, two constructors are defined, Person And Person2 , and practical new Operation creates 1 Person Instance object of usr .

Practical instanceof Operator to verify the constructor's prototype Property in the usr On the prototype chain of this instance.

Of course, the results show that, Person And Object Adj. prototype Property in the usr On the prototype chain. usr No Person2 Instance of, so Person2 Adj. prototype Attribute is not present usr On the prototype chain.

2. Implement instanceof

Got it instanceof After the function and principle of, you can realize 1 by yourself instanceof Functions with the same function: 


function myInstanceof(obj, constructor) {
    // obj Implicit prototype of 
    let implicitPrototype = obj?.__proto__;
    //  Prototype of constructor 
    const displayPrototype = constructor.prototype;
    //  Traversing prototype chain 
    while (implicitPrototype) {
        //  Find, return true
        if (implicitPrototype === displayPrototype) return true;
        implicitPrototype = implicitPrototype.__proto__;
    }
    //  The end of the traversal has not been found, and it returns false
    return false;
}

myInstanceof Function takes two arguments: the instance object obj And constructor constructor .

First, get the implicit prototype of the instance object: obj.__proto__ The prototype object for the constructor constructor.prototype .

Then, you can get the implicit prototype of the upper level continuously: 


implicitPrototype = implicitPrototype.__proto__;

To traverse the prototype chain and find displayPrototype Is it on the prototype chain, and if it is found, it returns true .

When implicitPrototype For null End search, no find, return Person20 .

Prototype chain is actually a data structure similar to linked list.

instanceof What I do is to look for target nodes on the linked list. Starting from the header node, traverse backwards continuously. If the target node is found, return true . The end of the traversal has not been found, and it returns Person20 .

STEP 3 Verify

Write a simple example to verify the implementation of 1 instanceof : 


function Person() {}
function Person2() {}

const usr = new Person();

function myInstanceof(obj, constructor) {
    let implicitPrototype = obj?.__proto__;
    const displayPrototype = constructor.prototype;
    while (implicitPrototype) {
        if (implicitPrototype === displayPrototype) return true;
        implicitPrototype = implicitPrototype.__proto__;
    }
    return false;
}

myInstanceof(usr, Person); // true
myInstanceof(usr, Object); // true

myInstanceof(usr, Person2); // false
myInstanceof(usr, Function); // false

myInstanceof(usr.__proto__, Person); // false
usr.__proto__ instanceof Person; // false

As you can see, myInstanceof The correct result was obtained.

Interestingly, usr.__proto__ instanceof Person Return Person20 , description obj instanceof constructor Prototype chain detected, excluding obj The node itself.

JavaScript common handwritten code:

"GitHub-code-js"

Related articles: