Angular 4个实例变量用局部变量改变

Question

当我在复制 campaignData 后更改 localCampaign 的 isPublish 属性时，campaignData 的 isPublish 属性也会更改，"can see the comments in code below where this is happening"

export class CampaignNotificationDetailPage {
campaignData: any;

   publishCampaign() {
  let localCampaign = this.campaignData;
  localCampaign.isPublish = true;  //this also updates the this.campaignData.isPublish to true?
    }
   }

如何阻止 campaignData 中的更改以及为什么会发生这种情况？

Answer 1

这是因为 localCampaign 被赋值为 this.campaignData。现在 this.campaignData 指向位置说参考位置

当你说

localCampaign=this.campaignData;

您只是将 localCampaign 指向 this.campaignData

的参考位置

因此，当 this.campaignData 发生变化时，localCampaign 会逐渐变化，因为它们指向相同的参考位置。这个概念叫做call by reference.

您可以将克隆的对象分配给 localCampaign

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

现在你可以使用上面的方法克隆this.campaignData

let localCampaign=clone(this.campaignData);

Answer 2

let localCampaign = JSON.parse(JSON.stringify(this.campaignData));

这将制作一个副本。

Answer 3

是的，它更改了 campaignData 值，即使 let 是块范围的。

当我们做

let localCampaign = this.campaignData;

localCampaign 指向 this.campaignData，当您更改 localCampaign 中的值时，它会反映在 this.campaignData.

中

而publishCampaign变黑后（即{}），localCampaign将从内存中移除。

Answer 4

javascript中的对象是引用类型，所以你必须找到一种方法来应用克隆对象，这是解决这个问题的一种方法:

export class CampaignNotificationDetailPage {
 campaignData: any;

    publishCampaign() {
    let localCampaign = object.assign({},this.campaignData);
    localCampaign.isPublish = true; 
    }
   }

另一种方式：

export class CampaignNotificationDetailPage {
  campaignData: any;

       publishCampaign() {
       let localCampaign  {...this.campaignData}
       localCampaign.isPublish = true; 
        }
       }

这个回答很好解释How to Deep clone in javascript

Angular 4个实例变量用局部变量改变

Angular 4 instance variable changed with local variable

angular

instance-variables