Question

Say I have two constructors:

A = function () {
    this.x = 'x';
};
A.prototype.a = 'a';

B = function () {
    this.y = 'y';
};
B.prototype.b = 'b';

How can I create an object ab that will inherit from the
prototypes of both of them? so the following example will work:

ab.a === 'a'; // true
ab.b === 'b'; // true
A.prototype.a = 'm';
ab.a === 'm'; // true
B.prototype.b = 'n';
ab.b === 'n'; // true

Thanks

Answer 1

You can’t, there’s only one prototype chain. You basically have three options:

Inherit from one, copy the other

All you can do in terms of having the properties on a single object is inherit from one of the prototypes and copy the properties of the other. Obviously that’s not quite what you want, because you don’t have the live reference aspect of the copied properties, but it’s all you can do in terms of having these properties on a single object.

Composition

Another option is composition:

var ab = {
    aness: new A(),
    bness: new B()
};

ab.aness.a === 'a'; // true
ab.bness.b === 'b'; // true
A.prototype.a = 'm';
ab.aness.a === 'm'; // true
B.prototype.b = 'n';
ab.bness.b === 'n'; // true

So now, ab as an A aspect (call it an “A-ness”) in its aness property, and a B aspect (call it a “B-ness”) in its bness property.

Frequently when one thinks “I need multiple inheritance,” composition is a good alternative (even in systems that allow multiple inheritance). Not always, mind, but frequently.

If you need to add functions to the A-ness or B-ness of ab that also have access to the other aspect, you can do that with closures. This can come up if, for instance, you have pass an object into a third-party library that expects to see an A instance and call its foo function, and we want to do something different in foo based on some state in our B aspect. For example:

function AB() {
    var aness, bness;

    this.aness = aness = new A();
    this.bness = bness = new B();

    // `foo` returns the `a` property of our composite if
    // it's been changed; otherwise, it returns the `b`
    // property of our composite.
    aness.foo = function() {
        // We want to use `A`'s normal `foo` unless our
        // B-ness `b` property is 42 for some reason.
        if (bness.b === 42) {
            // Our magic number, handle locally.
            return "The answer";
        }
        // Not our magic number, let `A` handle it
        return A.prototype.foo.call(this);
    };
}
var ab = new AB();

Beware the above pattern, though, because it creates a new function for every instance generated by the AB constructor. If there are a lot, it could become a memory issue.

At this point, we start straying into inheritance chains and supercalls, which I talk about in more detail in this blog post.

Link B to A

If you’re the designer of A and B, it may make sense for B to inherit from A, and then your ab can be created by the B constructor:

A = function () {
    this.x = 'x';
};
A.prototype.a = 'a';

B = function () {
    this.y = 'y';
};
B.prototype = new A();
B.prototype.b = 'b';

ab = new B();

ab.a === 'a'; // true
ab.b === 'b'; // true
A.prototype.a = 'm';
ab.a === 'm'; // true
B.prototype.b = 'n';
ab.b === 'n'; // true

…but that means that all B objects are also A objects, which may not be what you want.

---

Off-topic: I haven’t added vars to the above on the assumption there’s a reason they’re not there (e.g., they’re already declared in code you’re not showing).

Off-topic 2: Unless you have a good reason, I always recommend using named functions rather than anonymous ones (the functions you’re assigning to A and B are anonymous).