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