如何动态修改 script 标签内定义的全局变量数据-js教程-PHP中文网

本文详解如何真正更新通过标签声明的全局 JavaScript 变量（如 data），而非仅修改 DOM 中的文本内容；重点说明直接赋值与 innerHTML 替换的本质区别，并提供安全、可靠的操作方案。

本文详解如何真正更新通过 `<script>` 标签声明的全局 javascript 变量（如 `data`），而非仅修改 dom 中的文本内容；重点说明直接赋值与 `innerhtml` 替换的本质区别，并提供安全、可靠的操作方案。</script>

在 HTML 中，<script> 标签内的代码会在页面加载时立即执行，其中声明的变量（如 data = { key: "ABCDEFG", balance: "100" }）会作为全局对象挂载到 window 上（前提是未使用严格模式或模块作用域）。此时，data 已是一个真实的 JavaScript 对象引用，<strong>修改其属性即可实时生效。</script>

而你原代码中使用：

document.getElementById("datas").innerHTML = `data = { key: "BCSD123", balance: "200" };`;

这一操作仅修改了 script 元素的 HTML 文本内容，并不会重新执行该脚本，也不会覆盖已存在的 data 对象。因此后续 alert(data.key) 仍返回原始值 "ABCDEFG" —— 这是常见误区：DOM 更新 ≠ JS 执行。

✅ 正确做法是直接操作变量本身：

智绘设计

智绘设计是一款AI图像与设计工具，腾讯推出的智能设计平台，让内容更精彩。

下载

document.getElementById("change").addEventListener("click", function() {
  data.key = "BCSD123";
  data.balance = "200";
  alert(data.key); // 输出 "BCSD123"
});

这样修改的是内存中 data 对象的属性，所有后续访问（包括 loadData 按钮中的 alert(data.key)）都会反映最新值。

⚠️ 注意事项：

确保 data 是全局可访问变量（未被 let/const 声明，且不在函数/模块作用域内）；
避免用 innerHTML 或 textContent 动态重写 <script> 内容来“更新数据”——这既不安全也不生效；</script>
若需彻底替换整个对象，可用 Object.assign(data, { key: "BCSD123", balance: "200" }) 或直接赋值 data = { key: "BCSD123", balance: "200" }（但需注意：后者会丢失原引用，若其他代码持有旧 data 引用则不受影响）；
更健壮的实践是封装为可变状态管理（如使用 window.appState = { data: { ... } }），便于维护和调试。

总结：JavaScript 变量的本质是内存引用，修改数据请操作变量本身，而非其源码字符串。这是理解动态交互与状态更新的关键基础。