布尔值在 JavaScript 函数中不会改变

Question

我有以下代码：

const ships = (length) => {
  isSunk = false
  console.log('BEFORE: ' + isSunk)
  const shipSize = length
  let hits = []
  const hitLocation = location => {
    hits.push(location);
    isSunk = true;
    console.log('INSIDE: ' + isSunk)
  }
  console.log('AFTER: ' + isSunk)
  return {
    isSunk,
    hitLocation,
    hits,
    shipSize
  }
}

const two = ships(2)
two.hitLocation(1)
two.hitLocation(2)
console.log('FINAL: ' + two.isSunk)
console.log('HITS: ' + two.hits)

当我最后调用它时，是否有原因 isSunk 没有保存为 true ？

是因为嵌套函数的原因吗？

Answer 1

当您将布尔值设置到对象中时，它就是该值。它不是对变量的引用。因此，当您更改变量时，您在返回的对象中保存的值不会更新。

您可以使用函数来获取值

const ships = (length) => {
  isSunk = false
  console.log('BEFORE: ' + isSunk)
  const shipSize = length
  let hits = []
  const hitLocation = location => {
    hits.push(location);
    isSunk = true;
    console.log('INSIDE: ' + isSunk)
  }
  console.log('AFTER: ' + isSunk)
  return {
    isSunk: () => isSunk,
    hitLocation,
    hits,
    shipSize
  }
}

const two = ships(2)
two.hitLocation(1)
two.hitLocation(2)
console.log('FINAL: ' + two.isSunk())

另一种选择是使用类。

class Ship {

    hits = [];
    
    constructor(length) {
        this.shipSize = length;
    }
    
    get isSunk() {
        return this.hits.length === this.shipSize;
    }
    
    hitLocation (location) {
      this.hits.push(location);
      console.log('INSIDE: ' + this.isSunk)
    }
    
}


const two = new Ship(2)
two.hitLocation(1)
two.hitLocation(2)
console.log('FINAL: ' + two.isSunk)

Answer 2

发生这种情况的原因是 isSunk 只是一个局部变量和一个值，而 hits 也是一个局部变量，但是一个数组，因此只是一个引用而不是一个值。
当您在调用ship()时返回对象时，这些值和引用将在对象中返回。

现在，当您调用 hitLocation() 时，它使用局部变量 hits 向数组添加一个条目，并且由于数组只是局部变量 hits< 的引用/code> 和 two 对象中的 hits 具有相同的引用，因此它们指向相同的内存位置，因此可以使用返回的对象看到更新。

另一方面，hitLocation() 也会修改局部变量isSunk，但由于您不返回它，并且它不是存储在变量two< 中的对象的引用/code> 未更新。

在我看来，解决这个问题的最佳方法是在这里使用类而不是对象。这比始终返回和/或传递要对函数执行某些操作的对象要简洁和清晰得多。