Question

我对JS的原型设计很新，但总的来说并不是oop。然而，对于画架来说是新的。话虽如此，我一直试图通过点击事件触发一个对象变量，我真的无法找到一个体面的方式。

尝试构建可点击的2D“板”，这是我的测试代码：

(function() { //"Class"

        Brick = function() {
            this.initialize();
        };

        var p = Brick.prototype = new createjs.Container();
        p.Container_initialize = p.initialize;

        p.initialize = function() {
            this.Container_initialize();
        };

        p.create = function(row, column) {
            this.row = row;
            this.column = column;

            //Shape
            this.square = new createjs.Shape();
            this.square.graphics.beginFill("green").drawRect(0, 0, brickSize, brickSize);
            this.x = (brickSize * column) + (Game.padding * column); // Add some padding
            this.y = (brickSize * row) + (Game.padding * row); // Add some padding
            this.addChild(this.square);

            this.addEventListener("click", function(event) { console.log(this.row)})                
        };

    })();

在此之后，我只需创建一些循环通过多维数组循环的Bricks，并将它们添加到舞台上。董事会表现得非常好，然而，我一直保持“不确定”，同时克服。 console.log（event.currentTarget.row）虽然有效，但不确定它是否可行。

谢谢！

Answer 1

最好不要创建Parent的实例来设置Child的原型，使用Object.create并将其剪贴为旧浏览器：

var p = Brick.prototype = Object.create(createjs.Container.prototype);

您的事件处理程序的this值不正确。 this值是调用对象，在调用函数时确定，而不是在声明函数时确定。您可以通过以下方式解决此问题：

    p.create = function(row, column) {
        //.... not changed
        var me = this;
        this.addEventListener("click", function(event) { 
          console.log(me.row)})                
    };

如果您使用带有firebug的Chrome或Firefox，有时最好只使用console.log(this)并点击已记录的项目以便进一步检查。

有关原型的更多信息，请访问here。

使用easeljs单击事件读取原型变量

1 个答案: