为什么 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>