Question

下面是我刚刚开始研究的一些代码（虚拟形象生成器实验）。我希望能够点击一个按钮并改变画布元素的位置，但是我遇到了麻烦。

在按钮上的点击事件功能I console.log out canvasTop ...

console.log(this.canvasTop);

...然而，它未定义。我可以在代码中的任何其他位置访问该变量，但在此单击事件函数中除外。为什么会这样？

另一件事是下两行...

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

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

提前致谢！

代码：

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();
        });
    }
};

Answer 1

点击处理程序在不同的上下文中调用，因此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

访问全局变量和异步问题

1 个答案: