javascript - 在 Kinetic.js 中，原型节点不会影响所有子节点？

Question

http://jsfiddle.net/VTK7K/

Kinetic.Node.prototype.test = function() {
    alert('worked');
};

var d = new Kinetic.Image({});
d.test();

我正在尝试向 Kinetic.Node 添加一个原型方法，以便它可用于扩展它的所有对象，这似乎不适用于某些对象，而适用于其他对象。

难道我做错了什么？

Answer 1

问题是在创建 Kinetic 对象期间复制了所有方法，然后似乎忘记了连接：

// v4.3.1, l. 54
Kinetic.Global.extend(Kinetic.SceneCanvas, Kinetic.Canvas);

// v4.3.1, l. 785
extend: function(c1, c2) {
    for(var key in c2.prototype) {
        if(!( key in c1.prototype)) {
            c1.prototype[key] = c2.prototype[key];
        }
    }
},

一种可能性是使用 KineticJS 自己的扩展机制将额外的原型条目复制到 Kinetic 散列中的 ctor 函数：

var KineticMixin = function() {};
KineticMixin.prototype = {
    doSomething : function () { console.log("yo-ho-ho"); }
};

for(var key in Kinetic) {
    if(Kinetic.Type._isFunction(Kinetic[key])) {
        Kinetic.Global.extend(Kinetic[key], KineticMixin);
    }
}

var d = new Kinetic.Image({});
d.doSomething();

如果要扩展的 ctor 函数已经有一个具有该名称的条目，它将被忽略。因此，复制和修改extend函数来解决这个问题可能是个好主意。仅仅遍历 Kinetic 对象中的所有键似乎是不应该做的事情。也许是明确的有更好的方法。

Answer 2

定义对象时声明原型。当它被实例化时，它与 KineticJS 中的原型无关，afaik。

要重新定义对象的原型，您可以再次运行以下命令来添加 Kinetic.Node 的额外原型。

Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
Kinetic.Global.extend(Kinetic.Group, Kinetic.Container);
Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Line, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Path, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.RegularPolygon, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Sprite, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Star, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Wedge, Kinetic.Shape);