0
158
VisualizaçõesShallow copy, Deep copy
const Inner = function(Text) {
this._Text = Text;
this.Alert = () => {
alert(this._Text["Message"]);
}
};
const Outer = function() {
this.Text = {
Message: "Hi"
};
this.Inner = new Inner(this.Text);
this.Alert = this.Inner.Alert;
};
const OuterObject = new Outer();
OuterObject.Alert();
OuterObject.Text["Message"] = "Hello";
OuterObject.Alert();Output: Hi->Hello
const Inner = function(Text) {
this._Text = Text;
this.Alert = () => {
alert(this._Text["Message"]);
}
};
const Outer = function() {
this.Text = {
Message: "Hi"
};
this.Inner = new Inner(this.Text);
this.Alert = this.Inner.Alert;
};
const OuterObject = new Outer();
OuterObject.Alert();
OuterObject.Text = {
Message: "Hello"
};
OuterObject.Alert();Output: Hi->Hi
I was experimenting with shallow copy and deep copy in Javascript.Then I ran the above codes. I don't understand why the former was a shallow copy and the latter a deep copy. Please help me.
1 Respostas
Responde à pergunta0
After you call new Outer(); in your first code block, you end up with both this.Text inside of Outer and this._Text within Inner pointing to the same object in memory, that being the object you created in Outer:
{
Message: "Hi"
}
This is due to the fact that when you pass this.Text to Inner you end up passing the reference of the above object. As a result, this._Text references the same object to this.Text refers to. This means that when you modify the Text object, the change is reflected also when you log this._Text, because both Text and _Text are referring to the same object.
A similar thing occurs with your second code block - before you perform OuterObject.Text = {Message: "Hello"}; both this._Text and this.Text refer to the same object in memory (as they did in the first example), however, when you reassign OuterObject.Text = {Message: "Hello"};, you are creating a new object in memory ({Message: "Hello"};), and assigning a reference to that new object to the .Text property, the object that ._Text refers to ({Message: "Hi"}) still remains, as all you have done is update .Text to point to a new object, and haven't changed the this._Text reference or object.
To explain in diagrams, in both code blocks, you initially have the following:
In your first code block, when you do OuterObject.Text["Message"] = "Hello";, you're updating the one object in memory that both this.Text and this._Text point to, meaning that when you view this._Text.Message you see "Hello" and the same with this.Text.Message:
In your second code block, the first diagram/situation still occurs but the second doesn't, instead, when you perform OuterObject.Text = {Message: "Hello"}; you get the following structure:
Above, this.Text points to a new object created in memory, whereas this._Text still points to the old object, as the pointer for this._Text isn't changed. So logging this._Text still shows "Hi"