I'm not very well aquainted with javascript inheritance, and I'm trying to make one object inherit from another, and define its own methods:

function Foo() {}
Foo.prototype = {
    getColor: function () {return this.color;},
};
function FooB() {}
FooB.prototype = new Foo();
FooB.prototype = {
    /* other methods here */
};

var x = new FooB().getColor();

However, the second one overwrites the first one(FooB.prototype = new Foo() is cancelled out). Is there any way to fix this problem, or am I going in the wrong direction?

Thanks in advance, sorry for any bad terminology.

I'm not very well aquainted with javascript inheritance, and I'm trying to make one object inherit from another, and define its own methods:

function Foo() {}
Foo.prototype = {
    getColor: function () {return this.color;},
};
function FooB() {}
FooB.prototype = new Foo();
FooB.prototype = {
    /* other methods here */
};

var x = new FooB().getColor();

However, the second one overwrites the first one(FooB.prototype = new Foo() is cancelled out). Is there any way to fix this problem, or am I going in the wrong direction?

Thanks in advance, sorry for any bad terminology.

• javascript
• oop
• multiple-inheritance
• prototypal-inheritance

3 Answers 3

Each object can only have one prototype, so if you want to add to the prototype after inheriting (copying) it, you have to expand it instead of assigning a new prototype. Example:

function Foo() {}

Foo.prototype = {
    x: function(){ alert('x'); },
    y: function(){ alert('y'); }
};

function Foo2() {}

Foo2.prototype = new Foo();
Foo2.prototype.z = function() { alert('z'); };

var a = new Foo();
a.x();
a.y();
var b = new Foo2();
b.x();
b.y();
b.z();

One solution would be:

function FooB() {}
var p = new Foo();
p.methodA = function(){...}
p.methodB = function(){...}
p.methodC = function(){...}
...

FooB.prototype = p;

Update: Regarding expanding with an existing object. You can always copy the existing properties of one object to another one:

FooB.prototype = new Foo();
var proto = {
     /*...*/
};

for(var prop in proto) {
    FooB.prototype[prop] = proto[prop];
}

As long as proto is a "plain" object (i.e. that does not inherit from another object) it is fine. Otherwise you might want to add if(proto.hasOwnProperty(prop)) to only add non-inherited properties.

You can use an extend function which copies the new members to the prototype object.

function FooB() {}
FooB.prototype = new FooA();

extend(FooB.prototype, {
    /* other methods here */
});

extend

/**
 * Copies members from an object to another object.
 * @param {Object} target the object to be copied onto
 * @param {Object} source the object to copy from
 * @param {Boolean} deep  whether the copy is deep or shallow
 */
function extend(target, source, deep) {
    for (var i in source) {
        if (deep || Object.hasOwnProperty.call(source, i)) {
            target[i] = source[i];
        }
    }
    return target;
}