为什么变量a无法获取document.querySelector('#b1').value的最新值

这个现象是由JavaScript的基础类型赋值规则直接导致的，具体原理如下：

• DOM元素的value属性是字符串类型，属于JavaScript的基础数据类型，基础类型的赋值都是值拷贝逻辑
• 执行let a = document.querySelector('#b1').value时，只会把代码运行瞬间DOM元素的value值复制一份存到变量a的独立内存空间，a和DOM元素的value属性没有任何绑定关联
• 后续修改document.querySelector('#b1').value = 10时，只是修改了DOM对象自身的属性值，不会同步更新之前已经赋值完成的变量a

如果需要实时获取最新的value值，可以将DOM对象本身赋值给变量（引用类型赋值传递的是内存地址，指向同一个DOM实例），用法参考：

let b1Elem = document.querySelector('#b1');
console.log(`a: ${b1Elem.value}`);
b1Elem.value = 10;
console.log(`a: ${b1Elem.value}`); // 此时可以正确输出更新后的值

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