本文解析因共享对象引用导致的全局变量污染问题，说明为何修改同一对象的不同属性（如 Models）会引发后端 JSON 序列化异常，并提供基于数据隔离、深拷贝和命名规范的可靠解决方案。
本文解析因共享对象引用导致的全局变量污染问题，说明为何修改同一对象的不同属性（如 models）会引发后端 json 序列化异常，并提供基于数据隔离、深拷贝和命名规范的可靠解决方案。
在 JavaScript 中，全局函数本身不会自动“缓存”或“污染”变量，但当多个函数反复操作同一个被引用的对象（尤其是从 Kendo UI Grid 等组件中获取的 dataItem() 返回值）时，就极易引发隐式状态污染——这正是您遇到问题的根本原因。
您代码中的 rawData 并非独立副本，而是对 Grid 数据源中原始对象的直接引用。这意味着：
-
X()执行时设置rawData.Models = "some text"（字符串）； -
Y()执行时覆写为rawData.Models = ["some text"]（数组）； - 若后续
X()再次执行，它仍作用于同一个对象实例，此时Models已是数组类型，赋值字符串虽不报 JS 错，但该对象已被“污染”，传至后端时因同一字段类型不一致（string vs array），触发 Newtonsoft.Json 的序列化异常：Unexpected character encountered while parsing value...。
✅ 正确解法：避免共享引用，而非重命名属性
虽然重命名为 ModelList 可绕过冲突，但这属于“掩盖问题”，并非健壮方案。推荐以下三种专业级实践：
1. 使用结构化克隆（推荐现代环境）
function X() {
"use strict";
const tab = globalFunctionToGetActiveTab();
const view = globalFunctionToGetView(tab.id);
const tabPane = tab.getPane();
const currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid");
const row = $(e).closest("tr");
const rawData = currentGrid.dataItem(row);
// 创建纯净副本，彻底隔离副作用
const payload = structuredClone(rawData);
payload.Models = "some text";
OpenPageA(payload);
}
function Y() {
"use strict";
const tab = globalFunctionToGetActiveTab();
const view = globalFunctionToGetView(tab.id);
const tabPane = tab.getPane();
const currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid");
const row = $(e).closest("tr");
const rawData = currentGrid.dataItem(row);
const payload = structuredClone(rawData);
payload.Models = ["some text"]; // 类型可自由定义，无副作用
OpenPageB(payload);
}✅ 优势：语义清晰、零依赖、原生支持嵌套对象/数组；⚠️ 注意：IE 不支持，需检查目标浏览器兼容性（Chrome 98+ / Firefox 94+ / Edge 98+）。
立即学习“Java免费学习笔记（深入）”；
2. 手动浅拷贝 + 显式属性控制（兼容性最佳）
若需支持旧版浏览器，用 Object.assign 或展开运算符构造新对象：
// 仅复制需传递的字段，排除潜在污染源
const payload = {
...rawData,
Models: "some text" // 覆盖时确保类型预期一致
};
OpenPageA(payload);? 提示：避免
Object.assign({}, rawData)直接全量拷贝，因rawData可能含不可枚举属性、函数或循环引用；建议显式声明白名单字段。
3. 封装为纯函数，输入即隔离
将数据准备逻辑抽象为工厂函数，强制输入隔离：
const createPayloadForPageA = (baseData, modelsValue) => ({
...baseData,
Models: modelsValue // string expected
});
const createPayloadForPageB = (baseData, modelList) => ({
...baseData,
Models: modelList // array expected
});
// 调用时自然隔离
OpenPageA(createPayloadForPageA(currentGrid.dataItem(row), "some text"));
OpenPageB(createPayloadForPageB(currentGrid.dataItem(row), ["some text"]));⚠️ 关键注意事项
-
永远不要假设
dataItem()返回的是“干净副本” —— Kendo UI 明确文档指出其返回对原始数据项的引用； - 后端序列化框架（如 Newtonsoft.Json）默认要求同一字段类型稳定，动态切换
string↔array属于契约破坏； - “全局函数”无需重置缓存，真正需管理的是对象引用生命周期；
- 若业务允许，更优方案是在后端统一接收为
object或JToken，由服务层做类型适配，但前端隔离仍是第一道防线。
通过主动克隆或构造新对象，您不仅能彻底规避此类序列化异常，还能显著提升代码可测试性与可维护性——每个函数都成为真正意义上的纯函数（Pure Function），输入决定输出，无隐藏状态依赖。
