Why do I need to set constructor for a extend function?

Question

I'm trying to fully understand how 'extend' works in javascript.

Here's a simple extend function I found on google

function extend(child, parent) {

    var f = function() {}
    f.prototype = parent.prototype;


    var i;

    for( i in parent.prototype ) {
        child.prototype[i] = parent.prototype[i];
    }


    child.prototype.constructor = child;
    child.parent = parent;

}

it works, but I don't understand "child.prototype.constructor = child" part. The function still works without it.

What's the purpose of the line?

Answer 1

No. Where did you find that? It mixes two approaches:

The classical prototype inheritance

function inherit(child, parent) {
    var f = function() {}
    f.prototype = parent.prototype;

    child.prototype = new f();
    child.prototype.constructor = child;
}

This function creates a new object that inherits directly from the prototype object of the parent function. It is an old-style synonym for Object.create(). With that, a prototype chain is set up - all instances of child inherit from the parent.prototype as well. Because a new object is generated to overwrite child.prototype, the "constrcutor" property needs to be updated.

The mixin inheritance

This function just loops over all properties of the parent's prototype object, and copies them onto the child's prototype object. This is quite what the common helper function extend does. It does not reset the "prototype" property of the child function, but it also does not set up a inheritance chain.

function extend(child, parent) {
    for (var i in parent.prototype ) {
        child.prototype[i] = parent.prototype[i];
    }
}

You are right, the line

child.prototype.constructor = child;

is quite useless here - the "constructor" property is not enumerable and will not be affected by the extend.

Also, your function sets a "parent" property of the child function object to the parent function, which is not required:

child.parent = parent;

Answer 2

It appears to me that the 'child.prototype.constructor' is a base/vanilla implementation of the object, it allows other objects to extend from it without inheriting the same parent. Hence why it is declared prior to 'child.parent = parent'.

Answer 3

This may not directly answer your question, but I would like to reccomend you to use the extend implementation of John Resig:

• Simple JavaScript Inheritance

It allows you to create a constructor named init, like this:

var MyClass = Class.extend({
    init: function() {
         console.log("Running a constructor");
    }
});

and instanciate objects like this (normal):

var obj = new MyClass();

Answer 4

This example shows how to inherit a class in javascript

var a = function(){
    // class a constructor
    this.a_priviligiate_var = 1;
}
a.prototype.a_public_var = 2;
var b = function(){
    // class b constructor
    // super call of class a constructor
    // this line makes b class to inherit all privileged vars
    b.prototype.constructor.call(this)
    this.b_priviligiate_var = 3;
}
b.prototype.b_public_var = 4;
b.prototype = new a();
var c = new b();

Defining a claas:

var a = function(){
    // class a constructor
    this.a_priviligiate_var = 1;
}
a.prototype.a_public_var = 2;

Defining another class:

var b = function(){
    // class b constructor
    // super call of class a constructor
    // this line makes b class to inherit all privileged vars
    b.prototype.constructor.call(this)
    this.b_priviligiate_var = 3;
}
b.prototype.b_public_var = 4;

Setting the super(parent) class. This line copies all b.prototype

b.prototype = new a();

Creating a instance of c

var c = new b();