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

【问题标题】：Underscore extend method and fabric.js subclass下划线扩展方法和 fabric.js 子类
【发布时间】：2015-03-13 00:57:24
【问题描述】：

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

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 的方法，它从PathBased 对象中调用getPointByIndex 方法。当我的程序调用route.createRoutePoint() 时，我收到一个错误，指出getPointByIndex 未定义。

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

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

【问题讨论】：

createClass 应该返回一个函数（派生类的构造函数）。看来您应该扩展该函数的原型而不是函数本身。
谢谢。你能给我看一个代码示例吗？我似乎无法让它工作。我尝试通过首先调用var Route = fabric.util.createClass(fabric.Path, { //my Route stuff });，然后在下一行调用Route = _.extend(Route.prototype, PathBased); 来分离事物，但是当我尝试使用var route = new Route(); 创建Route 的实例时，这样做会给我一个错误，说object is not a function .
是的，我就是这样做的，除了不要将_.extend 的返回值分配回Route，因为这会将Route 的构造函数替换为其原型对象。

标签： javascript underscore.js fabricjs

【解决方案1】：

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

解释：

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

【讨论】：

您能否解释一下为什么我要扩展Route.prototype 而不仅仅是Route？
Route 是一个构造函数，因此虽然它可以具有属性，但这些属性不会被您使用它创建的 Route 实例继承。这些对象以 Route.prototype 作为其原型，因此添加到 Route.prototype 的任何属性都由实例继承。