Fungsi JavaScript tidak mempunyai nilai pulangan

Question

Ini mungkin sesuatu yang sangat mudah dan bodoh, tetapi mengapa ia tidak mengembalikan apa-apa? Saya mempunyai kaedah kelas mudah ini:

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;
        }
    }

Tetapi apabila dijalankan dalam pelayar, outputnya ialah

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

Mengapa ia tidak mengembalikan apa-apa? console.log sedang berjalan tetapi tiada nilai pulangan

Answer 1

Saya menambah beberapa nilai arbitrari pada pembolehubah yang anda gunakan, tetapi saya dapat membuat kod anda berfungsi seperti ini:

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

Selain itu, sedikit petua. Apabila anda secara eksplisit mengembalikan true或false berdasarkan ungkapan Boolean, anda juga boleh terus mengembalikan ungkapan Boolean itu sendiri.

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