1

下面是我刚刚开始处理的一些代码（化身生成器实验）。我希望能够单击一个按钮并更改画布元素的位置，但是我遇到了一些问题。

在按钮上的单击事件函数中，我 console.log out canvasTop ...

console.log(this.canvasTop);

...但是，它变得不确定。除了这个点击事件函数之外，我可以在代码中的任何其他地方访问该变量。为什么会这样？

另一件事是接下来的两行......

this.canvasTop += 10;
AvatarGenerator.canvas();

...在这些行的第一行，我想迭代 canvasTop 值，然后在第二行调用绘制画布的函数。但是，第二行似乎在第一行之前运行（是的，我知道 JS 是异步的），这意味着画布元素直到我下次单击按钮时才会移动。我该如何解决这个问题？

提前致谢！

编码：

AvatarGenerator = {

    canvasTop: 50,
    canvasLeft: 50, 
    canvas: $('#canvas')[0],
    context: canvas.getContext('2d'),

    init: function() {
        AvatarGenerator.canvas();
        AvatarGenerator.toolBox();
    },

    canvas: function() {
        console.log(this.canvasTop); // <-- 50
        this.context.beginPath();
        this.context.moveTo(this.canvasLeft, this.canvasTop);
        this.context.lineTo(300, 300);
        this.context.stroke();
    },

    toolBox: function() {
        var moveLeftBtn = $('#moveLeftBtn');

        moveLeftBtn.on('click', function(){
            console.log(this.canvasTop); // <-- undefined, why?

            this.canvasTop += 10;
            AvatarGenerator.canvas();
        });
    }
};
4

1 回答 1

4

单击处理程序在不同的上下文中调用，因此this不再指向您的对象。

试试这个：

var self = this;
moveLeftBtn.on('click', function(){
  console.log(self.canvasTop);

  self.canvasTop += 10;
  AvatarGenerator.canvas();
});

或者，对于现代浏览器，您可以将对象绑定到您的函数，这样您就不需要self：

moveLeftBtn.on('click', function(){
  console.log(this.canvasTop);

  this.canvasTop += 10;
  AvatarGenerator.canvas();
}.bind(this));
//^^^^^^^^^^ this determines what 'this' in the callback function is pointing to
于 2013-05-01T15:25:46.360 回答