Inheritance and module pattern

Question

I'm trying to implement the inheritance with the module pattern in this way:

Parent = function () {

    //constructor
    (function construct () {
        console.log("Parent");
    })();

    // public functions
    return this.prototype = {

        test: function () {
            console.log("test parent");
        },


        test2: function () {
            console.log("test2 parent");
        }

    };
};


Child = function () {

    // constructor
    (function () {
        console.log("Child");
        Parent.call(this, arguments);
        this.prototype = Object.create(Parent.prototype);
    })();


    // public functions
    return this.prototype = {

        test: function()
        {
            console.log("test Child");
        }

    }

};

but I can't to call from child's instance the test2().

var c = new Child();
c.test2(); // c.test2 is not a function

What I wrong?

Schoolbook

How to implement inheritance in JS Revealing prototype pattern? explains in-depth how to use the module pattern and inheritance. – Zymase

Answer 1

You're not using the module pattern in the correct way. Somehow, your "constructor" is called as an immediately-invoked function expression (IIFE), and the module closure is not. It should be the other way round.

Also, you can't assign to this.prototype. To create the prototype object from which all instances will inherit, you will need to assign to the prototype property of the constructor function (the this keyword even pointed to the global window object in your case).

And you should return the constructor function, not the prototype object, from the IIFE as soon as you have it.

Parent = (function () {
    // constructor
    function construct () {
        console.log("Parent");
    };

    // public functions
    construct.prototype.test = function () {
        console.log("test parent");
    };
    construct.prototype.test2 = function () {
        console.log("test2 parent");
    };

    return construct;
})();


Child = (function () {
    // constructor
    function construct() {
        console.log("Child");
        Parent.apply(this, arguments);
    }

    // make the prototype object inherit from the Parent's one
    construct.prototype = Object.create(Parent.prototype);
    // public functions
    construct.prototype.test = function() {
        console.log("test Child");
    };

    return construct;
})();

Zymase

Thanks so much. Now I would have another question: Is it possibile to add in Child a static function? – Schoolbook

Depends on what you mean by "static", there's no real equivalent to that in the dynamic JS language :-) However, you could assign a function to the Child constructor function object: Child.method = function(){…}; (or inside the module closure, construct.method = …;) – Zymase

with "static" I mean call a function without to create an istance of Child. Something like this Child.myStaticFunction() – Schoolbook

It's not clear why this line :Parent.apply(this, arguments); is there. it does nothing in the relevant code. – Refresh

@RoyiNamir: It does execute the parent constructor, as visible from the side effect console.log("Parent");. Of course, it actually does nothing, but it's there in case the parent will get extended in the future. Just a good practise to keep the code maintainable, and it does no harm :-) – Zymase

Answer 2

(function () {
    console.log("Child");
    Parent.call(this, arguments);
    this.prototype = Object.create(Parent.prototype);
})();

this refers to window, because you wrapped your code into a function. Remove the wrapping function or pass this as argument.

Bankbook

Who passes this as this? – Bankbook

You said "pass this as argument", which seems useless. OK, I had assumed that you passed it as the thisArg, but even if not it won't matter - could you please post the code you thought of? – Zymase

(function (that) { Parent.call(that ... } (this)) – Bankbook

Ah, now I see. I didn't even spot the Parent call as the big mistake, but the this.prototype assignment. – Zymase