JavaScript函數缺乏回傳值

Question

這可能是一些非常簡單和愚蠢的東西，但為什麼它沒有返回任何東西？ 我有這個簡單的類別方法：

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

但在瀏覽器中執行時，它的輸出是

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

為什麼它沒有回傳任何東西？ console.log正在運行，但沒有回傳值

Answer 1

我為你使用的變數添加了一些任意值，但是我能夠讓你的程式碼像這樣工作：

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

另外，一個小提示。當你根據布林表達式明確回傳true或false時，你也可以直接傳回布林表達式本身。

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