参数需深克隆而非浅拷贝，因对象/数组传参直接修改会污染原始数据；应于函数执行前用Proxy拦截并递归克隆，跳过基础类型，支持Date/RegExp等，避免JSON方案缺陷。
直接在函数执行前对参数做深度克隆，是防止核心逻辑意外污染原始数据的关键手段。重点不是“拦截”本身，而是克隆时机、克隆方式和适用边界要拿捏准确。
为什么参数需要深克隆而不是浅拷贝
函数参数若为对象或数组，传入后直接修改会改变调用方的数据状态——尤其在 Vue/React 状态管理、表单提交、缓存计算等场景中，极易引发视图错乱或状态不一致。浅拷贝（如 Object.assign() 或展开运算符）只复制第一层，嵌套结构仍共享引用；只有深克隆能切断所有层级的引用链。
推荐的拦截+克隆实现方式
不依赖框架，用原生 JS 就可构建轻量、可靠的参数保护机制：
- 用 Proxy 包裹目标函数，拦截
apply调用，在进入函数体前统一处理参数 - 对每个参数判断类型：基础类型（string/number/boolean/null/undefined）跳过克隆；对象或数组则走深克隆逻辑
- 优先使用递归实现的深克隆（支持 Date、RegExp、循环引用），避免
JSON.parse(JSON.stringify())的缺陷（丢失函数、Symbol、undefined、原型等） - 克隆后的参数替换原参数列表，再调用原始函数
一个可复用的参数保护拦截器示例
以下代码封装为通用工具函数，支持任意参数个数和混合类型：
function protectParams(fn) {
return function(...args) {
const clonedArgs = args.map(arg => {
if (arg === null || typeof arg !== 'object') return arg;
// 简化版递归克隆（不含 Symbol 和循环引用处理，适合多数业务场景）
if (Array.isArray(arg)) {
return arg.map(item => deepCloneBasic(item));
}
if (typeof arg === 'object') {
const clone = {};
for (const key in arg) {
if (Object.prototype.hasOwnProperty.call(arg, key)) {
clone[key] = deepCloneBasic(arg[key]);
}
}
return clone;
}
return arg;
});
return fn.apply(this, clonedArgs);
};
}
// 基础克隆函数（适配普通对象/数组）
function deepCloneBasic(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (Array.isArray(obj)) return obj.map(item => deepCloneBasic(item));
const clone = {};
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = deepCloneBasic(obj[key]);
}
}
return clone;
}
使用时只需包装一次：
const processData = protectParams((user, config) => {
user.profile.name = 'edited'; // 不会影响原始 user 对象
config.timeout = 10000;
return { ...user, config };
});
注意事项与边界情况
- 函数、Promise、Map、Set 等类型是否需要克隆，取决于业务需求；一般不克隆函数，保留其引用行为
- 若参数含大量数据或深层嵌套，克隆本身有性能开销，建议只对明确可变的对象参数启用
- Vue 中处理
reactive对象时，应先用toRaw()解包再克隆，否则克隆结果仍是响应式代理 - 后端 Java 场景下，类似逻辑可用 AOP + 序列化（如 Jackson）或手动 clone 方法实现
