为什么 JavaScript 属性不自动更新？

Question

我有一个带有属性的对象，它存储复选框的 checked 属性，如下所示：

var x = {
  isChecked: document.querySelector("input").checked
};


function getX() {
  (x.isChecked ? console.log("checkbox is checked") : console.log("checkbox is not checked"));
}

<input type="checkbox">
<button onclick="getX()">is the checkbox checked?</button>

选中和取消选中复选框时，isChecked 属性的值不会更新。为什么会这样？

Answer 1

因为 .checked 是布尔值，而不是对象，所以当您说 isChecked: document.querySelector("input").checked 时，您只是将 isChecked 设置为 element.checked 的当前值。使 isChecked 成为一个函数，以便在每次需要时获取实际值。

var x = {
  isChecked: () => document.querySelector("input").checked
};


function getX() {
  (x.isChecked() ? console.log("checkbox is checked") : console.log("checkbox is not checked"));
}

<input type="checkbox">
<button onclick="getX()">is the checkbox checked?</button>

或者，如果您想继续使用 isChecked 而不是 isChecked()，并且您希望能够使用该变量手动设置它，您可以像这样使用 getter 和 setter :

var x = {
  get isChecked() {
    return document.querySelector("input").checked;
  },
  
  set isChecked(checked) {
    return document.querySelector("input").checked = checked;
  }
};


function getX() {
  (x.isChecked ? console.log("checkbox is checked") : console.log("checkbox is not checked"));
}

<input type="checkbox">
<button onclick="getX()">is the checkbox checked?</button>
<button onclick="x.isChecked = false">uncheck</button>
<button onclick="x.isChecked = true">check</button>

为什么 JavaScript 属性不自动更新？

Why don't JavaScript properties update automatically?

html

javascript

dom

properties