为什么存储复选框checked状态的JavaScript对象属性无法自动更新？

问题产生原因 #

• 赋值时机问题：对象x的isChecked属性赋值操作是代码首次加载执行时一次性完成的，仅会在页面初始化阶段读取一次复选框的初始选中状态，后续复选框状态发生变更时，没有对应逻辑触发isChecked的重新赋值，所以属性值不会自动更新。
• 基本类型赋值特性：input元素的checked属性是布尔值，属于JavaScript的基本数据类型，这类数据的赋值采用值拷贝逻辑，而非引用绑定。也就是说你将document.querySelector("input").checked赋值给x.isChecked时，只是把当前时刻的布尔值复制了一份存入对象属性，赋值完成后x.isChecked和DOM元素的checked属性就不存在关联了，任意一方的变化都不会同步到另一方。

可选修复方案 #

可以给复选框绑定change事件，状态变动时主动更新x.isChecked的取值，示例实现如下：

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

// 绑定状态变化监听，同步更新对象属性
document.querySelector("input").addEventListener('change', function(e) {
  x.isChecked = e.target.checked
})

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

内容的提问来源于stack exchange，提问作者unreal