js -Uncaught TypeError：无法读取对象未定义的属性“x”（球

Question

您好，我在尝试运行此代码时收到上述错误消息，但我终其一生都无法弄清楚它有什么问题，非常感谢您的帮助。请原谅您可能会看到的任何新手错误。我已经创建了一个球，我正在尝试移动它。

        class Ball{
            constructor(x,y,xSpeed,ySpeed,r){
                this.x =x;
                this.y=y;
                this.xSpeed=xSpeed;
                this.ySpeed=ySpeed;
                this.r= r;

            }

            draw(){
                ctx.clearRect(0,0, 500, 200);
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
                ctx.stroke();
             }

             move()
             {
                this.x+=this.xSpeed; //error is here
                this.y+=this.ySpeed;
                if (this.x==0)
                {
                    this.xSpeed=2;
                }
                else if(this.x==500)
                {
                    this.xSpeed=-2;
                }
                if (this.y==200)
                {
                    this.ySpeed=-1;
                }
                else if (this.y==0)
                {
                    this.ySpeed=1;
                }


                window.requestAnimationFrame(this.move);

            }
        }
    var canvas = document.getElementById("canvas-for-ball");
    var ctx = canvas.getContext("2d")
    let balls=new Ball (10,10,2,1,5);
    balls.draw();
    balls.move();

Answer 1

问题在于，当您调用 requestAnimationFrame 并将对 move 的引用作为其回调传递给它时，执行回调时，绑定到您的 Ball 实例的 this 会丢失。相反，您必须以 this 仍绑定到您的 Ball 实例的方式传递 move。您可以通过使用.bind() 方法传递函数引用来做到这一点，该方法接受一个参数来指定回调函数运行时this 绑定的内容。

class Ball {
  constructor(x,y,xSpeed,ySpeed,r){
    this.x = x;
    this.y = y;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
    this.r = r;
  }

  draw(){
    ctx.clearRect(0,0, 500, 200);
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
    ctx.stroke();
  }

  move(){
    this.x += this.xSpeed;
    this.y += this.ySpeed;
    if (this.x == 0) {
      this.xSpeed = 2;
    } else if(this.x == 500) {
      this.xSpeed =- 2;
    }
                
    if (this.y == 200) {
      this.ySpeed =- 1;
    } else if (this.y == 0) {
      this.ySpeed = 1;
    }
    window.requestAnimationFrame(this.move.bind(this));
  }
}

var canvas = document.getElementById("canvas-for-ball");
var ctx = canvas.getContext("2d")
let balls = new Ball(10,10,2,1,5);
balls.draw();
balls.move();

<canvas id="canvas-for-ball"></canvas>