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()).constructor); //a()
console.log((new b()).constructor); //a()
console.log((new c()).constructor); //a()

• Why isn't the constructor updated for b and c?
• Am I doing inheritance wrong?
• What is the best way to update the constructor?

Further, please consider the following.

console.log(new a() instanceof a); //true
console.log(new b() instanceof b); //true
console.log(new c() instanceof c); //true

• Given that (new c()).constructor is equal to a() and Object.getPrototypeOf(new c()) is a{ }, how is it possible for instanceof to know that new c() is an instance of c?

http://jsfiddle.net/ezZr5/

Solution 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.

Solution 2

By default,

function b() {}

then b.prototype has a .constructor property which is set to b automatically. However, you're currently overwriting the prototype and thus discarding that variable:

b.prototype = new a;

Then b.prototype does not have a .constructor property anymore; it was erased with the overwrite. It does inherit from a though, and (new a).constructor === a, and hence (new b).constructor === a (it is referring to the same property in the prototype chain).

Best to do is to simply setting it manually afterwards:

b.prototype.constructor = b;

You could also make a little function for this:

function inherit(what, from) {
    what.prototype = new from;
    what.prototype.constructor = what;
}

http://jsfiddle.net/79xTg/5/

Solution 3

constructor is a regular, non-enumerable property of the default value of the prototype property of function objects. Thus, assigning to prototype will lose the property.

instanceof will still work as it does not use constructor, but rather scans the prototype chain of the object for the (current) value of the function's prototype property, ie foo instanceof Foo is equivalent to

var proto = Object.getPrototypeOf(foo);
for(; proto !== null; proto = Object.getPrototypeOf(proto)) {
    if(proto === Foo.prototype)
        return true;
}
return false;

In ECMAScript3, there's no way to set a constructor property which behaves identically to the built-in one as user-defined properties are always enumerable (ie visible to for..in).

This changed with ECMAScript5. However, even if you set constructor manually, your code still has issues: In particular, it is a bad idea to set prototype to an instance of the parent-'class' - the parent constructor should not be called when the child-'class' is defined, but rather when child-instances are created.

Here's some ECMAScript5 example code for how it should be done:

function Pet(name) {
    this.name = name;
}

Pet.prototype.feed = function(food) {
    return this.name + ' ate ' + food + '.';
};

function Cat(name) {
    Pet.call(this, name);
}

Cat.prototype = Object.create(Pet.prototype, {
    constructor : {
        value : Cat,
        writable : true,
        enumerable : false,
        configurable : true
    }
});

Cat.prototype.caress = function() {
    return this.name + ' purrs.';
};

If you're stuck with ECMAScript3, you'll need to use a custom clone() function instead of Object.create() and won't be able to make constructor non-enumerable:

Cat.prototype = clone(Pet.prototype);
Cat.prototype.constructor = Cat;

Comments

[Robert Koritnik]

That's all true. But then you wouldn't know that a certain object is inherited. new b() instanceof a returns false when you use $.extend which may be undesired in OP's case if he needs to check inheritance.

[pimvdb]

@Robert Koritnik: Good point, but b instanceof b is always false since the constructor is not an instance of itself. The extend function does seem to work for new b instanceof b, unless I'm misunderstaning you: jsfiddle.net/79xTg/3.

[Robert Koritnik]

I edited my comment. It was of course a typo. And let me edit your example: jsfiddle.net/79xTg/4 $.extend doesn't do inheritance but rather prototype copy. Hence you can't check inheritance using it.

[pimvdb]

@Robert Koritnik: You're correct. Since extend is not made for inheritance purposes I removed it.

[pimvdb]

+1 I'd prefer Object.getPrototypeOf instead of .__proto__ though.

[Aadit M Shah]

I only used the __proto__ property for the sake of explanation. That's the way it was explained on Mozilla Developer Network. Nevertheless, the __proto__ property does have an advantage over the Object.getPrototypeOf method in than it's faster (no function call overhead) and that it's implemented by all the major browsers. The only reason I would use Object.getPrototypeOf is to work around implementations like Rhino which do not support the __proto__ property. We all have our own preferences. I prefer the __proto__ property because it's more readable. Cheers. =)

[Lakmal Caldera]

2 questions - 1. Is the base constructor always Object? I'm having a hard time proving that in code. :( It always points to first constructor after Object. 2. When we chain proto, we are dereferencing the original prototype objects. Does that me we will not receive any of the properties from the those prototype objects except the Object prototype? After all prototypes are attached not added to instances.

[Aadit M Shah]

@CodeHater Why would the arrows point in the opposite direction?