javascript - 在 JavaScript 中混入本身就是对象的对象属性

Question

我已经阅读了很多 JavaScript 混合设计模式，但没有找到适合我需要的。我所见的大部分内容都使用某种程度的函数，将一个对象的方法复制到另一个对象的原型(prototype)。对于值属性，这就像使用方法一样工作，但对于本身是对象的属性，它会失败，因为仅复制它们意味着我的类的每个实例都将指向该属性的同一个对象。

我用一个简单的点类做了一个代码示例:

var Point = function ( x, y ) {
    this.x = x;
    this.y = y;
};

Point.prototype = {
    constructor: Point,
    print: function () {
        console.log( this.x + this.offset[0], this.y + this.offset[1] );
    }
};

打印函数使用了一个我还没有声明的偏移属性，因为它源自一个我想混合到我的 Point 类中的 Transformable 类:

var Transformable = {
    offset: [ 0, 0 ],
    setOffset: function ( x, y ) {
        this.offset[ 0 ] = x;
        this.offset[ 1 ] = y;
    }
};

为了制作 mixin，我使用了一些像这样的 extent 函数:

var extent = function ( target, mixin ) {
    for ( var property in mixin ) {
        if ( !target.prototype[ property ] ) {
            target.prototype[ property ] = mixin[ property ];
        }
    }
};
extent( Point, Transformable );

现在代码可以编译并可以使用了:

var myPoint1 = new Point( 1, 2 );
myPoint1.setOffset( 5, 5 );
var myPoint2 = new Point( 1, 2 );
myPoint1.print();
myPoint2.print();

但它两次都打印“6 7”，因为 myPoint2 中使用的偏移量数组与 myPoint1 中的相同。

那么我怎样才能让每个点都有自己的偏移量数组，同时仍然来自混合？它也应该适用于数组以外的每个对象，因为如果不是为了简单的简短示例，我会在这里使用向量类。

实际上 this answer完成我想要的，但作为进一步的要求，我希望仍然能够使用对象文字语法来添加 Point 类的方法:

Point.prototype = {
    constructor: Point,
    print: function () {...},
    ...
};

不过，对于 mixin 对象的语法可能是什么样子，我是灵活的。

Answer 1

回答你的第二个帖子；不，这个解决方案没有什么不好，除了 Bergi 已经提到的 - 基于函数的 Mixin 永远不应该被实例化，而是总是通过 call 或 apply。性能不会成为问题。 JS 在处理对象、函数委托(delegate)和处理闭包方面快如闪电。您的胜利是关注点分离、代码重用、仍然坚持 ES3 语言核心(不需要第 3 方库)、能够引入额外状态，同时控制如何公开或隐藏此类额外状态。

原始帖子提供的重构示例:

var Transformable = function () {       // a function based mixin approach
    var offset = [0, 0];                // is library agnostic and already
                                        // at ES3 language core level enables
    this.setOffset = function (x, y) {  // composition as well as creation of
        offset[0] = x;                  // and/or passsing around additional
        offset[1] = y;                  // state.
    };
    this.getOffsetX = function () {
        return offset[0];
    };
    this.getOffsetY = function () {
        return offset[1];
    };
};

var Point = function (x, y) {

    this.x = x;
    this.y = y;
                                // applying the `Transformable` mixin
    Transformable.call(this);   // onto the new `Point` instance.
};
Point.prototype = {
    constructor: Point,
    print: function () {
        console.log(this.x + this.getOffsetX(), this.y + this.getOffsetY());
    }
};


var myPoint1 = new Point( 1, 2 );
myPoint1.setOffset( 5, 5 );

var myPoint2 = new Point( 1, 2 );

myPoint1.print(); // 6 7
myPoint2.print(); // 1 2

仍然以 OP 的示例为起点，下一个方法对于 Point 的原型(prototype) print 方法可能更清晰，不会对既不属于部分的方法做出任何假设constructor 和 prototype ...

var Transformable = function () {
    var offset = [0, 0];

    this.setOffset = function (x, y) {
        offset[0] = x;
        offset[1] = y;
    };
    this.getOffsetX = function () {
        return offset[0];
    };
    this.getOffsetY = function () {
        return offset[1];
    };

    return this;
};


var Point = function (x, y) {

    this.x = x;
    this.y = y;

    return this;
};
Point.prototype.print = function () {

    console.log(this.x, this.y);
};


var TransformablePoint = function () {

    return Transformable.call(Point.apply(this, arguments));
};
TransformablePoint.prototype.print = function () {

    console.log(this.x + this.getOffsetX(), this.y + this.getOffsetY());
};


var myPoint1 = new TransformablePoint( 1, 2 );
myPoint1.setOffset( 5, 5 );

var myPoint2 = new TransformablePoint( 1, 2 );

myPoint1.print(); // 6 7
myPoint2.print(); // 1 2