function object inheritance using jquery's extend

Question

I'm trying to simulate inheritance using jquery extend but as far as I could test, it works only with objects.

What I'm trying to accomplish is:

var baseDefinition = function() {
    var self = this;

    self.calc1 =  function() {
        return "something1";
    }

    self.calc2 =  function() {
        return "something2";
    } 

    self.myObject = {
        propA = 100;
        propB = 200;
    };
}

var derivedDefinition = function() {
    var self = this;

    self.calc2 =  function() {
        return "something different from base";
    }

    self.myObject = {
        propB  = 400;
    };            
}

var instance = $.extend(true, {}, baseDefinition, derivedDefinition);

So I would hope to create a new instance from base definition where the derived definitions would be applied to the base ones but neither definitions would be "touched". Is it possible?

I was hoping to avoid any prototype so basicaly I would like to call instance.calc1 or instance.calc2 without knowing wether it was overriten or not.

Edit:

In my example I didn't include any object properties which was what led me to use jquery's extend function. Although both answers solve inner functions "inheritance", it doesn't (obviously) merge object properties like extend does. As a possible solution I'm thinking after I create my instance to loop through the properties of the instance and apply jquery's extend on them. Although this seems inefficient to me, I don't know if you can advise me on another course of action.

$.extend() only updates keys in one object with the contents of another. If your first object in the chain is a {}, obviously the end result won't be a function. Just use an explicit namespace object or the regular JS OO features. — millimoose
– millimoose, Commented Jul 30, 2013 at 22:49
@millimoose I understand what you mean with "namespace" object but that would overwrite the whole function "class" and not it's overrides. If I'm wrong please let me know. With JS OO you mean using prototypes? — Dev Rios
– Dev Rios, Commented Jul 30, 2013 at 23:05
@DevRios Yes, I mean the mechanism in JS that already provides inheritance instead of trying to roll your own. — millimoose
– millimoose, Commented Jul 30, 2013 at 23:20

Ray Waldin · Accepted Answer · 2013-07-30 23:08:25Z

4

JQuery extend does not create an inheritance hierarchy, so changes you make to base definition AFTER you extend would not be reflected in derived definition. Here's how you can extend the base definition in a way that does reflect later changes down the inheritance hierarchy using Javascript prototypal inheritance:

var baseDefinition = function() {};

baseDefinition.prototype.calc1 =  function() {
    return "something1";
};

baseDefinition.prototype.calc2 =  function() {
    return "something2";
};   


var derivedDefinition = function() {};

derivedDefinition.prototype = Object.create(baseDefinition.prototype);

derivedDefinition.prototype.calc2 =  function() {
    return "something different from base";
};

var instance = new derivedDefinition();
instance.calc1();  // something1
instance.calc2();  // something different from base

answered Jul 30, 2013 at 23:08

Ray Waldin

3,2271 gold badge18 silver badges14 bronze badges

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

2 Comments

Dev Rios Over a year ago

This is an excelent question and it raises a very important topic "Here's how you can extend the base definition in a way that does reflect later changes down the inheritance hierarchy" I will up this as soon as I have enough reputation but in this particular scenario, I want a frozen in time instance.

Jean-Philippe Martin Over a year ago

Real good but not supported in ie < 10, for those see developer.mozilla.org/en-US/docs/Web/JavaScript/…

Bergi · Accepted Answer · 2013-07-30 22:55:44Z

1

$.extend only works on already existing objects, not on function which will instantiate objects in the (far?) future:

var instance = $.extend(true, {}, new baseDefinition(), new derivedDefinition());

However, you could of course design an extend function that works for constructors and that returns a function:

function extendConstr() {
    var fns = arguments;
    return function newConstr(){
        var self = {};
        for (var i=0; i<fns.length; i++)
            fns[i].apply(self, arguments);
        return self;
    }
}

var extendedFunction = extendConstr(baseDefinition, derivedDefinition);

var instance = extendedFunction();
console.log(instance); // has `calc1` and overwritten `calc2`

Btw, without an extend function you could've done that already manually in the derived constructor:

function derivedDefinition() {
    baseDefinition.call(this/*, arguments */);

    this.calc2 =  function() {
        return "something different from base";
    }
}
console.log(new derivedDefinition) // has a `calc1` as well

answered Jul 30, 2013 at 22:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

4 Comments

Dev Rios Over a year ago

I've just tested your approach in jsfiddle and it seems to work very well. I will test a bit more thouroughly using my real definitions.

Bergi Over a year ago

Don't just test, try to understand it :-) This doc will probably help you…

Dev Rios Over a year ago

It's been a few years since I've met Mr Call and Apply but now I understand what you are doing, very smart actually.

Dev Rios Over a year ago

If you wouldn't mind reading through my questions's edit, I would appreciate it

Collectives™ on Stack Overflow

function object inheritance using jquery's extend

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related