JavaScript inheritance and the constructor property

Question

Consider the following code.

function a() {}
function b() {}
function c() {}

b.prototype = new a();
c.prototype = new b();

console.log((new a()).constructo         


        

Answer 1

Okay, let's play a little mind game:

From the above image we can see:

1. When we create a function like function Foo() {}, JavaScript creates a Function instance.
2. Every Function instance (the constructor function) has a property prototype which is a pointer.
3. The prototype property of the constructor function points to its prototype object.
4. The prototype object has a property constructor which is also a pointer.
5. The constructor property of the prototype object points back to its constructor function.
6. When we create a new instance of Foo like new Foo(), JavaScript creates a new object.
7. The internal [[proto]] property of the instance points to the prototype of the constructor.

Now, the question arises that why doesn't JavaScript attach the constructor property to the instance object instead of the prototype. Consider:

function defclass(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

var Square = defclass({
    constructor: function (side) {
        this.side = side;
    },
    area: function () {
        return this.side * this.side;
    }
});

var square = new Square(10);

alert(square.area()); // 100

As you can see the constructor property is just another method of the prototype, like area in the example above. What makes the constructor property special is that it's used to initialize an instance of the prototype. Otherwise it's exactly the same as any other method of the prototype.

Defining the constructor property on the prototype is advantageous for the following reasons:

1. It's logically correct. For example consider Object.prototype. The constructor property of Object.prototype points to Object. If the constructor property was defined on the instance then Object.prototype.constructor would be undefined because Object.prototype is an instance of null.
2. It's treated no differently from other prototype methods. This makes the job of new easier since it doesn't need to define the constructor property on every instance.
3. Every instance shares the same constructor property. Hence it's efficient.

Now when we talk about inheritance, we have the following scenario:

From the above image we can see:

1. The derived constructor's prototype property is set to the instance of the base constructor.
2. Hence the internal [[proto]] property of the instance of the derived constructor points to it too.
3. Thus the constructor property of the derived constructor instance now points to the base constructor.

As for the instanceof operator, contrary to popular belief it doesn't depend on the constructor property of the instance. As we can see from above, that would lead to erroneous results.

The instanceof operator is a binary operator (it has two operands). It operates on an instance object and a constructor function. As explain on Mozilla Developer Network, it simply does the following:

function instanceOf(object, constructor) {
    while (object != null) {
        if (object == constructor.prototype) { //object is instanceof constructor
            return true;
        } else if (typeof object == 'xml') { //workaround for XML objects
            return constructor.prototype == XML.prototype;
        }
        object = object.__proto__; //traverse the prototype chain
    }
    return false; //object is not instanceof constructor
}

To put it simply if Foo inherits from Bar, then the prototype chain for the instance of Foo would be:

1. foo.__proto__ === Foo.prototype
2. foo.__proto__.__proto__ === Bar.prototype
3. foo.__proto__.__proto__.__proto__ === Object.prototype
4. foo.__proto__.__proto__.__proto__.__proto__ === null

As you can see, every object inherits from the Object constructor. The prototype chain ends when an internal [[proto]] property points to null.

The instanceof function simply traverses the prototype chain of the instance object (the first operand) and compares the internal [[proto]] property of each object to the prototype property of the constructor function (the second operand). If they match, it returns true; and else if the prototype chain ends, it returns false.