Javascript inheritance constructor

Question

While creating inheritance pattern in JS such as follows -

var Fruits = function(){};
var Apples = function(){};
Apples.prototype = new Fruits;
Apples.prototype.constructor = Apples;

Why do we change the constructor of the base class?

Answer 1

In this example apple inherits fruits constructor. The line Apples.prototype = new Fruits means any future Apple created will start as a fruit. The next line sets the constructor of Apple to fruits constructor. You could do the same thing with out the prototype but then it would only affect the one instance

Answer 2

Forget about the words "base class".

In JavaScript, a function which is used as a constructor (invoked with the new keyword) can have a prototype object. The members of the prototype object can be invoked or accessed as though they were members of objects created by that constructor.

Simple example: ( http://jsfiddle.net/G2CUp/ )

var djangoFett = { // note that Django here is an object,
                   // not a constructor function and not a "class"
    shootBlaster: function() {
        alert("Blam! Blam!");
    }
};

function CloneTrooper() {
    return this;
};

CloneTrooper.prototype = djangoFett; // note that the prototype
                                     // is an object, not a "class"

var myCloneTrooper = new CloneTrooper();
myCloneTrooper.shootBlaster();

In this example we have an object djangoFett which is the prototype for objects created using the CloneTrooper constructor function. Of note is that djangoFett - the prototype for CloneTrooper - is an object, not a function or a "class".

Your code snippet is different though - your example has two constructor functions, so let's add another constructor function, to bring my code snippet more in line with yours: ( http://jsfiddle.net/r28QS/ )

function Mandalorian() {
    this.shootBlaster = function() {
        alert("Blam! Blam!");
    }
    return this;
};

var djangoFett = new Mandalorian();

function CloneTrooper() {
    return this;
};

CloneTrooper.prototype = djangoFett; // note that the prototype
                                     // is an object, not a "class"

var myCloneTrooper = new CloneTrooper();
myCloneTrooper.shootBlaster();

This time djangoFett isn't just an object literal - instead it's created by invoking the Mandalorian function while using the new keyword.

The above code snippet is very similar to the code snippet you provided in your question - I've just added a few more explicit steps along the way. Re-structuring the code to match your own a little more:

Mandalorian = function() {};
CloneTrooper = function() {};
CloneTrooper.prototype = new Mandalorian(); // note that the prototype
                                            // is an object, not a "class"

So if I then change the CloneTooper.prototype.constructor value...

// this is the same as `djangoFett.constructor = CloneTrooper`
// it does not affect the `Mandalorian` constructor function
// in any way whatsoever
CloneTooper.prototype.constructor = CloneTrooper;

...it should now be clear that this doesn't affect the the Mandalorian constructor function (the "base class") in any way. It affects only one object, which happens to be an instance of Mandalorian.

So, why do we change the constructor of the base class? The answer is we don't. We change the constructor of the prototype object. Now, why we do that is another can of worms entirely - and there are already questions on SO which address it.