TypeScript如何解除对象引用绑定？菜单数组赋值覆盖问题求解

这问题我之前也踩过坑，核心原因是TypeScript/JavaScript里的对象属于引用类型——你拿到的this.menu[i]其实是指向原数组中对象的"指针"，不管你把它赋值给哪个变量，修改属性都会同步影响原对象。再加上你初始的this.menu只有1个元素，但roles有3个元素，循环到i=1和i=2时this.menu[i]其实是undefined，这不仅会报错，还会导致你误以为是"覆盖之前的对象属性"（实际是反复修改了唯一的那个menu对象）。

修复方案 #

根据你的需求，我提供两种最常用的解决思路：

1. 为每个Role创建全新的Menu实例（推荐） #

如果你的目标是根据每个Role生成对应的菜单项，而不是修改原有的菜单数组，那直接每次循环都创建新的Menu实例就好，完全隔离原对象：

let names: string[] = [];
// 先拿到原菜单的基础模板（如果需要复用其他属性的话）
const baseMenu = this.menu[0];

for (const role of roles) {
    let newName: string;
    // 根据role匹配名称
    switch(role) {
        case 1:
            newName = "Article1";
            break;
        case 2:
            newName = "Article2";
            break;
        case 3:
            newName = "Article3";
            break;
        default:
            newName = baseMenu.name;
    }
    // 创建新的Menu实例，传入原模板的其他属性，替换name
    const newMenu = new Menu(
        newName,
        baseMenu.code,
        baseMenu.parent,
        baseMenu.title,
        baseMenu.hidden
    );
    names.push(newName);
    // 如果需要把新菜单项存入数组，直接push到新数组或者原数组（按需选择）
    // this.menu.push(newMenu);
}

这样每个循环生成的都是独立的对象，完全不会影响原数组里的初始对象。

2. 拷贝原对象后修改（浅/深拷贝） #

如果只是不想修改原对象的属性，可以对原对象进行拷贝，修改拷贝后的副本：

let names: string[] = [];
for (let i = 0; i < roles.length; i++) {
    // 先做浅拷贝，生成新对象（TS需要类型断言告诉编译器这是Menu类型）
    const menuCopy = {...this.menu[i]} as Menu;
    
    let name: string;
    if(roles[i] === 1) {
        name = menuCopy.name = "Article1";
    } else if (roles[i] === 2) {
        name = menuCopy.name = "Article2";
    } else if (roles[i] === 3) {
        name = menuCopy.name = "Article3";
    } else {
        name = menuCopy.name;
    }
    
    names.push(name);
    // 把拷贝后的对象存入新数组，原数组完全不受影响
    // const newMenuList = [];
    // newMenuList.push(menuCopy);
}

注意：如果Menu对象里有嵌套的对象属性（比如parent是一个对象），浅拷贝会导致嵌套对象还是引用类型，这时候需要用深拷贝：

• 简单场景可以用JSON.parse(JSON.stringify(this.menu[i]))（但会丢失函数、Symbol、循环引用这类特殊值）
• 复杂场景建议用成熟工具库，比如Lodash的cloneDeep方法。

TypeScript中解除对象引用绑定的本质 #

要解除引用绑定，核心就是创建原对象的独立副本，而不是直接引用原对象：

• 浅拷贝：适用于无嵌套对象的场景
  • 对象展开运算符：const copy = {...original}
  • Object.assign()：const copy = Object.assign({}, original)
  • 类实例可以手动复制属性创建新实例（比如方案1的做法）
• 深拷贝：适用于有嵌套对象的场景
  • 简易实现：JSON.parse(JSON.stringify(original))（有局限性）
  • 自定义深拷贝函数或使用工具库（如Lodash.cloneDeep）

另外要区分值类型和引用类型：string、number、boolean这类基本类型是值传递，不存在引用问题；只有对象、数组、类实例这类引用类型才需要考虑解除引用。

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