Javascript Prototype Chaining super class constructor and method calling

Question

I'm a newbie in the JavaScript world, and I came up with this weird problem when i was attempting prototype chaining inheritence.

I have 3 classes

//class parent
function parent(param_1){
    this.param = param_1;
    this.getObjWithParam = function(val){
        console.log("value in parent class "+val);
        console.log("Constructor parameter : "+this.param);
    };

};

//class child
function child(param_1){
    this.constructor(param_1);
    this.getObjWithParam = function(val){
        console.log("value in child class "+val);
        val = Number(val)+1;
        child.prototype.getObjWithParam.call(this, [val]);
    };
};
child.prototype = new parent();

//class grandChild
function grandChild(param_1){
    this.constructor(param_1);
};
grandChild.prototype = new child();


var gc = new grandChild(666);
gc.getObjWithParam(0);

Firstly, I wanted to pass a parameter to the constructor of the parent classes, like the way they do by calling super(args) in other OO languages. so this.constructor(param_1); fairly suits the purpose.

However, the output comes up as

value in parent class 0
Constructor parameter : 666

Which suggests, that the class grandChild has skipped the prototype chain, and instead of calling getObjWithParam() of child() class, has called getObjWithParam() of the parent class.

Does anyone have any idea what goes wrong here?

NB: 2 more findings i want to add, and the second one is the important one. --> If I try to find the constructor of grandChild class by

console.log(gc.constructor)

the output i get is

function parent(param_1){
    this.param = param_1;
    this.getObjWithParam = function(val){
        console.log("value in parent class "+val);
        console.log("Constructor parameter : "+this.param);
    };
}

which is the not quite the thing i expected. I was expecting to see the child class.

--> If I try to comment //this.constructor(param_1); in the child() and the grandChild() class, the code works exactly as expected.

Could anyone explain this phenomenon please.

Also, it'll be highly appreciated if anyone could suggest an workaround.

Thanks

m0sa · Accepted Answer · 2012-01-02 16:08:35Z

4

Declaring a this.SOME_METHOD in the constructor function doesn't add it to the type's prototype. Prototype functions need to be declared separately, e.g.:

//class parent
function parent(param_1){
    console.log("parent " + param_1);
    this.param = param_1;
}

parent.prototype.getObjWithParam = function(val) {
    console.log("value in parent class "+val);
    console.log("Constructor parameter : "+this.param);
};

//class child
function child(param_1){
    console.log("child " + param_1);
    this.constructor(param_1);
}
child.prototype = new parent();
child.prototype.getObjWithParam = function(val) {
    console.log("value in child class "+val);
    val = Number(val)+1;
    parent.prototype.getObjWithParam.call(this, [val]);    
}

//class grandChild
function grandChild(param_1){
    console.log("grandChild " + param_1);
    this.constructor(param_1);
}
grandChild.prototype = new child();


var gc = new grandChild(666);
gc.getObjWithParam(0);

I would recommend you to read this article, to get a deeper insight how prototypes work in javascript.

answered Jan 2, 2012 at 16:08

m0sa

11k4 gold badges48 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tirtha Over a year ago

Your example and the article was of help, however, I guess this brings me back to square one. I was attempting to call the super class methods in prototype chaining inheritance. I attempted to call the super class constructor method using this.constructor(param_1); and tried to call the super class method by Class.prototype.function.call(this, [param]); So i guess, I'll call the super class method the way i was doing,and stop using //this.constructor(param_1); Instead, I'll have some method in the parent class to initialise the inherited variables, which i can call from the child class.

Pradeep · Accepted Answer · 2012-01-02 15:55:34Z

If you want to do chaining (Fluent Interface) like in jQuery:

<div id="div"></div>

<script type="text/javascript">
function $(id) {
    if(this.$) return new $.init(id);
}

$.init = function(id) {
     if(typeof id == 'string') {
         this.id = document.getElementById(id);
     }
};

$.init.prototype = $.prototype = {
    constructor: $,
    css: function(value) {
        for(i in value) {
            this.id.style[i] = value[i];
        }
        return this;
    },
    mush : function() {
        var text = this.id.innerHTML;
        this.id.innerHTML = text.split('').join('--');
        return this;
    },
    text : function(a) {
        this.id.innerHTML = a;
        return this;
    }
};

$('div').text('FOO').mush().css({
        'color' : 'red',
        'textTransform' : 'uppercase'
});
</script>

See example

Collectives™ on Stack Overflow

Javascript Prototype Chaining super class constructor and method calling

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related