javascript - 为什么 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属性的值不会更新。为什么会这样？

标签： javascripthtmldomproperties

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>