La fonction JavaScript manque de valeur de retour

Question

C'est probablement quelque chose de très simple et stupide, mais pourquoi cela ne renvoie rien ? J'ai cette méthode de classe simple :

checkCollision(event) {
        let eventX = event.clientX - canvasRect.left;
        let eventY = event.clientY - canvasRect.top;
        if (this.centerX - eventX <= this.radiusX && this.centerX - eventX >= (this.radiusX/-1) && this.centerY - eventY <= this.radiusY && this.centerY - eventY >= (this.radiusY/-1)) {
            console.log(true);
            return true;
        } else {
            console.log(false);
            return false;
        }
    }

Mais lorsqu'il est exécuté dans le navigateur, sa sortie est

> obj.checkCollision({clientX: 200, clientY: 200})
false
<- undefined

Pourquoi ça ne renvoie rien ? console.log est en cours d'exécution mais aucune valeur de retour

Answer 1

J'ai ajouté des valeurs arbitraires aux variables que vous avez utilisées, mais j'ai pu faire fonctionner votre code comme ceci :

const canvasRect = { left: 50, top: 50 };

const obj = {
  centerX: 100,
  centerY: 100,
  radiusX: 100,
  radiusY: 100,

  checkCollision(event) {
    let eventX = event.clientX - canvasRect.left;
    let eventY = event.clientY - canvasRect.top;
    if (
      this.centerX - eventX <= this.radiusX &&
      this.centerX - eventX >= this.radiusX / -1 &&
      this.centerY - eventY <= this.radiusY &&
      this.centerY - eventY >= this.radiusY / -1
    ) {
      return true;
    } else {
      return false;
    }
  },
};

console.log(obj.checkCollision({ clientX: 200, clientY: 200 }));
// >>> True

Aussi, un petit conseil. Lorsque vous renvoyez explicitement true或false en fonction d'une expression booléenne, vous pouvez également renvoyer directement l'expression booléenne elle-même.

const canvasRect = { left: 50, top: 50 };

const obj = {
  centerX: 100,
  centerY: 100,
  radiusX: 100,
  radiusY: 100,

  checkCollision(event) {
    let eventX = event.clientX - canvasRect.left;
    let eventY = event.clientY - canvasRect.top;
    return (
      this.centerX - eventX <= this.radiusX &&
      this.centerX - eventX >= this.radiusX / -1 &&
      this.centerY - eventY <= this.radiusY &&
      this.centerY - eventY >= this.radiusY / -1
    );
  },
};

console.log(obj.checkCollision({ clientX: 200, clientY: 200 }));
// >>> True