JavaScript 中变量赋值与 DOM 属性引用的本质区别-js教程-PHP中文网

JavaScript 中变量赋值与 DOM 属性引用的本质区别

本文详解为何 var checkbox = elem.checked; checkbox = true 无法更新复选框状态，而 var checkbox = elem; checkbox.checked = true 可行——核心在于原始值与对象引用的赋值差异。

本文详解为何 `var checkbox = elem.checked; checkbox = true` 无法更新复选框状态，而 `var checkbox = elem; checkbox.checked = true` 可行——核心在于原始值与对象引用的赋值差异。

在 JavaScript 中，理解“值传递”与“引用传递”的区别，是正确操作 DOM 元素的关键。上述问题看似简单，实则触及语言底层机制：基本类型（如布尔值、数字、字符串）按值复制；对象（包括 DOM 元素）按引用复制。

? 为什么第一种写法无效？

var checkbox = document.getElementById('vehicle1').checked; // ✅ 获取的是布尔值（true/false）
checkbox = true; // ❌ 仅修改了局部变量 checkbox 的值，与 DOM 完全无关

这里 document.getElementById(...).checked 返回的是一个原始布尔值（primitive value），赋值给 checkbox 时，是将该值的副本存入变量。后续对 checkbox 的任何赋值（如 checkbox = true）都只影响这个独立变量，不会反向作用于 DOM 元素的 checked 属性。

✅ 为什么第二种写法有效？

var checkbox = document.getElementById('vehicle1'); // ✅ 获取的是 DOM 元素对象（引用类型）
checkbox.checked = true; // ✅ 直接修改该对象的属性，实时反映在页面上

此时 checkbox 存储的是对 DOM 元素的引用（reference）——相当于一个指向内存中该元素对象的“指针”。通过 checkbox.checked = true，我们是在操作原始对象的属性，因此页面上的复选框状态立即更新。

? 能否直接保存对 `checked` 属性的“引用”？

不能。 JavaScript 中不存在对属性（property）本身的独立引用类型。elem.checked 是一个访问器属性（getter）的返回值，每次读取都会执行 getter 并返回当前布尔值（即原始值），而非可绑定的“响应式链接”。你无法像 C 语言中取地址（&elem.checked）那样获取其内存地址。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

但你可以通过以下方式间接实现类似效果：

✅ 封装为函数（推荐）：

const checkboxEl = document.getElementById('vehicle1');
const setChecked = (value) => checkboxEl.checked = value;
setChecked(true); // ✅ 正确更新 DOM

✅ 使用 Proxy（高级场景）：

const el = document.getElementById('vehicle1');
const proxy = new Proxy(el, {
  set(target, prop, value) {
    if (prop === 'checked') target.checked = value;
    return true;
  }
});
proxy.checked = false; // ✅ 触发代理逻辑并更新 DOM