How does the prototype lookup work in isPrototypeOf on inherited classes?

Question

Taking the following code as a starting point:

class SuperKlass {};
class SubKlass extends SuperKlass {};

const superKlass = new SuperKlass();
const subKlass = new SubKlass();

console.log(SuperKlass.isPrototypeOf(SubKlass));
console.log(SuperKlass.prototype.isPrototypeOf(subKlass));
console.log(SuperKlass.prototype.isPrototypeOf(SubKlass.prototype));
// true true true

How does the lookup work for each of these? For example, the definition of the method states:

The isPrototypeOf() method checks if an object exists in another object's prototype chain.

So for the first one, SuperKlass.isPrototypeOf(SubKlass), SubKlass is the object whose prototype chain we are inspecting to find if it exists in SuperKlass. So then how does that work exactly? I tried debugging it a big in Chrome dev tools and figured it out on some trial-and-error for the first one:

When looking up the prototype chain does it use __proto__ or .prototype? And how would it work for the other two?

Answer 1

There are two important concepts here to understand Object.prototype.isPrototypeOf() :

1. The prototype chain is traversed via .__proto__, not via .prototype.
2. If the method call has the form: Parent.isPrototypeOf(item), then we first check to see if item.__proto__ === Parent, if it is not then we check to see if item.__proto__.__proto__ === Parent, ... all the way until the prototype chain ends (<...>.__proto__ === null).

With this we can build a basic function to emulate this method and add in some debugging helpers to see how it works:

function isPrototypeOf(obj, parent) {
    // a function to search the prototype chain of object to see if it's found in parent
    let isFound = false;
    let proto = obj.__proto__;
    while (proto) {
        console.log('Proto: ', proto);
        if (proto === parent) {
            console.log('Found!');
            isFound = true;
            break;
        }
        proto = proto.__proto__;
    }
    return isFound;
}


class SuperKlass {};
class SubKlass extends SuperKlass {};
const superKlass = new SuperKlass();
const subKlass = new SubKlass();
console.log(isPrototypeOf(SubKlass, SuperKlass));
console.log(isPrototypeOf(subKlass, SuperKlass.prototype));
console.log(isPrototypeOf(SubKlass.prototype, SuperKlass.prototype));
console.log(isPrototypeOf(SubKlass.prototype, SuperKlass.prototype.prototype)); // this shouldn't be found and will traverse until null