class Paddle {
  constructor(canvas, game) {
    this.mouseX = this.x;  ・・・1
    this.addHandler();
  }
  addHandler() {
    document.addEventListener('mousemove', e => {
      this.mouseX = e.clientX;  ・・・2
    });
  }
  update(ball) {
    const rect = this.canvas.getBoundingClientRect();
    this.x = this.mouseX - rect.left - (this.w / 2);  ・・・3
  }

1. constructor でパドルの左上の位置（this.x）を変数 mouseX に代入している
2. addHandler() でマウスが動いたら、マウスのブラウザでの位置（e.clientX）を変数 mouseX に代入している
3. update で this.x の位置を canvas でのパドル中央上の位置にしている

との認識ですが、this.x と this.mouseX と e.clientX の関係性と処理の流れが理解できていません。

ご教授願えないでしょうか。よろしくお願いします。