Почему, когда я создаю экземпляр класса внутри другого, он становится неопределенным?

Question

Я пытаюсь нарисовать простой прямоугольник на холсте и переместить его, поэтому я создал класс цикла для анимации и класс игрока внутри проигрывателя. Я создал экземпляр класса точек, но когда я пытаюсь использовать его внутри функции обновления проигрывателя, он выдается в консоли.undefined почему?

Я застрял, мне нужна помощь.

Класс Main

// import zone
import Player from "./player.js";
import Loop from "./loop.js";

// var zone
let canvas = document.getElementById("canvas"); // get canvas
let display = canvas.getContext("2d"); // get context
let loop;

// draw loop
function drawLoop() {
  loop = new Loop(canvas, display); // instance loop
  loop.update(); // update
  loop.draw(); // draw
  requestAnimationFrame(drawLoop); // loop
}
// invoke
drawLoop();

Класс Loop

// import zone
import Player from "./player.js";
// class
export default class Loop {
  // init
  constructor(canvas, display) {
    this.canvas = canvas;
    this.display = display;
    this.player = new Player(this.canvas, this.display);
  }
  // update
  update() {
    this.player.update();
  }
  // draw
  draw() {
    this.player.draw();
  }
}

Класс Player

// import zone
import Size from "./size.js";
import Point from "./point.js";

// class
export default class Player {
  constructor(canvas, display) {
    this.display = display;
    this.canvas = canvas;
    this.point = new Point(200, 200);
    this.size = new Size(100, 25);
  }
  // update
  update() {
    this.canvas.onclick = function(e) {
      console.log(this.point.x);
    };
  }
  // draw
  draw() {
    this.display.fillStyle = "#ffffff";
    this.display.fillRect(this.point.x, this.point.y, this.size.w, this.size.h);
  }
}

Точка класса

export default class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

должна возвращать позицию x (число).

Answer 1

Вы пытаетесь вызвать переменную экземпляра внутри блока, который имеет свое собственное значение "this". Однако указатель содержится в экземпляре объекта.

Функция стрелки будет поддерживать лексику и позволяет вам использовать переменную без привязки «this» к функции:

this.canvas.onclick = (e) => {
  console.log(this.point.x);
};