javascript - Node.js -未捕获类型错误 : Cannot read property 'x' of undefined at object (ball

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 的引用作为其回调， this绑定(bind)到您的Ball执行回调时实例会丢失。相反，您必须传递 move以这样的方式 this仍然绑定(bind)到您的Ball实例。您可以通过使用 .bind() 传递函数引用来完成此操作。方法，它采用一个参数来指定 this 的内容绑定(bind)将在回调函数运行时进行。

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>