Question

我创建了一个对象，其中包含我需要跨类的一些常用方法：

var PathBased = {
    appendPoint: function(point) {
            var lastPointIndex = this.getLastPointIndex();
            this.addPointAfterIndex(point, lastPointIndex);
    },

    getPointByIndex: function(index) {
            var pointX, pointY;

            if (index == 0) {
                    pointX = this.path[index][1];
                    pointY = this.path[index][2];
            } else {
                    pointX = this.path[index][3],
                    pointY = this.path[index][4];
            }

            return new fabric.Point(pointX, pointY);
    },

    ...

};

然后我想创建一个包含此功能的结构子类。我使用以下代码执行此操作：

var Route = _.extend(fabric.util.createClass(fabric.Path, {
    initialize: function(path, options) {
        var options = options || {};
        this.app = options.app;
        this.model = options.model;

        options.stroke = options.stroke || this.app.config.routeStroke;
        options.fill = options.fill || this.app.config.routeFill;

        this.callSuper('initialize', path, options);

        _.bindAll(this, 'handleMoving');
        this.on('moving', this.handleMoving);
    },

    createRoutePoint: function(pointIndex) {
        var point = this.getPointByIndex(pointIndex);

        return new RoutePoint({
                top: point.y,
                left: point.x,
                pointIndex: pointIndex,
                route: this,
                app: this.app,
                model: this.model
        });
    },

        ...

}), PathBased);

加载页面后，在Javascript控制台中，我可以看到，如果我创建一个新的Route对象：var route = new Route，该对象确实具有PathBased中的方法宾语。例如，我可以看到route.getPointByIndex存在。

但是，正如您在上面所看到的，Route对象有一个名为createRoutePoint的方法，该方法从getPointByIndex对象调用PathBased方法。当我的程序调用{{1}}时，出现route.createRoutePoint()未定义的错误。

我在这里错误地使用了getPointByIndex方法吗？似乎存在某种范围问题导致extend方法无法在getPointByIndex对象的上下文中使用。

我该如何正确地做到这一点？

Answer 1

var Route = fabric.util.createClass(fabric.Path, {
    ...
});
_.extend(Route.prototype, PathBased);

说明：

Route是一个构造函数，因此尽管它可以具有属性，但是这些属性不会由您使用它创建的Route实例继承。这些对象将Route.prototype作为其原型，因此添加到Route.prototype的任何属性都将由实例继承。

下划线扩展方法和fabric.js子类

1 个答案: