JavaScript - 特殊的多重继承

Question

假设我有以下对象类型：

var Positionable = function() { };
Positionable.prototype.x = 0;
Positionable.prototype.y = 0;

var Sizable = function() { };
Sizable.prototype.w = 0;
Sizable.prototype.h = 0;

var Fadable = function() { };
Fadable.prototype.a = 0;

我想要一个函数，允许我创建一个子类型，该子类型可以从其他几种类型继承。例如，我可以创建一个类型 Rectangle，它会继承自 Positionnable 和 Sizable。

我可以链接原型：

var Rectangle = function() { };
Sizable.prototype = new Positionable;
Rectangle.prototype = new Sizable;

但我不喜欢这种方法有两个原因：

• 它会导致 Sizable 继承自 Positionable，这意味着如果我希望另一个类型是 Sizable 而不是 Positionable，我做不到；

• 这意味着Sizable 对象也是Positionnable，这在语义上并不好，因为Sizable 对象没有理由成为Positionnable 而不是其他方式。

所以我首先考虑合并原型，假设我有一个函数void merge( type dst, type src, bool overwrite )，在循环中我会简单地将每个基类原型合并到子类型原型中。这不会创建一个链（这就是我想要的，如上所述）

但这会导致另一个问题：由于我没有使用 new，因此不会调用基本构造函数。所以我想知道，有没有办法也合并构造函数？例如，如果我可以访问和引用基本构造函数，我可以将这些基本构造函数中的每一个存储在一个数组中，并为子类型构造函数分配一个连续调用这些构造函数的函数。

我怎么能用构造函数做到这一点？或者也许还有其他方法？

感谢您的帮助！

Answer 1

if you use Object.Create(),you have to think about browser compatibility. you can write
a function to resolve the issue.eg: 

     function multipleinheritPrototype() {
        if (arguments.length == 0) {
            return;
        }
        var args = arguments;
        var sub = args[0];
        var constructor = sub.prototype.constructor;
        if (!Object.create) {
            Object.prototype.create = function (obj) {

                function f() {
                }

                f.prototype = obj;
                return new f();
            };
        }
        var base;
        for (var i = 1; i < args.length; i++) {
            base = Object.create(args[i].prototype);
            for (var attr in base) {
                sub.prototype[attr] = base[attr];
            }
        }
        sub.prototype.constructor = constructor;

    }      
    you can such so use it.
    multipleinheritPrototype(Rectangle, Sizeable, Positionnable);

Answer 2

由于 JavaScript 不支持多重继承，您必须解析为 mixins。就像您说的，您必须将其中一个原型的方法复制到子原型中。

构造函数应该在子构造函数内部调用。这是一个例子：

var Rectangle = function() {
    Sizeable.call(this);
    Positionnable.call(this);
};
// Rectangle inherits from Sizeable
Rectangle.prototype = Object.create(Sizeable.prototype);
// Mixin Positionnable
merge(Rectangle.prototype, Positionnable.prototype);

// alternatively you could mixin both of the prototypes

另见：Benefits of using `Object.create` for inheritance

---

function mixin(Target) {
    var args = arguments;

    // merge prototypes
    for(var i = 1; i < args.length; i++) {
        merge(Target.prototype, args[i].prototype);
    }

    // a new constructor function which calls all 
    // the passed constructor functions
    var F = function() {
        var instance = Target.apply(this, arguments);
        for (var i = 1; i < args.length; i++) {
            args[i].call(instance);
        }
        return instance;
    };
    F.prototype = Target.prototype;
    return F;
};

// usage

Rectangle = mixin(Rectangle, Sizeable, Positionnable);

这在一个假设下有效：mixin 构造函数不期望任何参数。如果必须向它们传递参数，则必须在目标/子构造函数中显式调用它们。