js -Uncaught TypeError: Невозможно прочитать свойство 'x' из неопределенного объекта (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 к вашему экземпляру Ball теряется при выполнении обратного вызова. Вместо этого вы должны передать move таким образом, чтобы this все еще был привязан к вашему Ball экземпляру. Это можно сделать, передав ссылку на функцию с помощью метода .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>