oop - javascript inheritance from multiple objects - Stack Overflow

admin管理员组

文章数量:1384718

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

Share Improve this question Follow asked Jan 20, 2011 at 11:18 tcooctcooc 21.3k33 gold badges4141 silver badges5757 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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;
}

本文标签： oopjavascript inheritance from multiple objectsStack Overflow