Skip to content

Instantly share code, notes, and snippets.

@hdvianna
Created May 28, 2019 19:41
Show Gist options
  • Save hdvianna/6f1eb5f15048937f17dd0fc21a9685dd to your computer and use it in GitHub Desktop.
Save hdvianna/6f1eb5f15048937f17dd0fc21a9685dd to your computer and use it in GitHub Desktop.
A pattern for deep cloning objects in javscript
(function CloneTest() {
const factory = (function () {
let factory = {
createShallow: function() {
return Object.create({
p1: "",
p2: "",
deepProperty: factory.createDeep(),
clone: function() {
let myNewMe = Object.assign(factory.createShallow(), this);
myNewMe.deepProperty = this.deepProperty.clone();
return myNewMe;
}
});
},
createDeep: function() {
return Object.create({
p1: "",
p2: "",
veryDeepProperty: factory.createVeryDeep(),
clone: function() {
let myNewMe = Object.assign(factory.createDeep(), this);
myNewMe.veryDeepProperty = this.veryDeepProperty.clone();
return myNewMe;
}
});
},
createVeryDeep: function() {
return Object.create({
p1: "",
p2: "",
clone: function() {
let myNewMe = Object.assign(factory.createVeryDeep(), this);
return myNewMe;
}
});
}
}
return factory;
})();
let newObj = factory.createShallow();
console.log(newObj);
newObj.p1 = "Property #1";
newObj.deepProperty.p1 = "Deep property #1";
newObj.deepProperty.veryDeepProperty.p1 = "Very deep property #1";
newObj2 = newObj.clone();
console.log("newObj.p1: ", newObj.p1);
console.log("newObj.deepProperty.p1: ", newObj.deepProperty.p1);
console.log("newObj.deepProperty.veryDeepProperty.p1: ", newObj.deepProperty.veryDeepProperty.p1);
console.log("newObj2.p1: ", newObj2.p1);
console.log("newObj2.deepProperty.p1: ", newObj2.deepProperty.p1);
console.log("newObj2.deepProperty.veryDeepProperty.p1: ", newObj2.deepProperty.veryDeepProperty.p1);
newObj2.p1 = "Property #1 (Changed)";
newObj2.deepProperty.p1 = "Deep property #1 (Changed)";
newObj2.deepProperty.veryDeepProperty.p1 = "Very deep property #1 (Changed)";
console.log("------------------------------------------------------------")
console.log("newObj.p1: ", newObj.p1);
console.log("newObj.deepProperty.p1: ", newObj.deepProperty.p1);
console.log("newObj.deepProperty.veryDeepProperty.p1: ", newObj.deepProperty.veryDeepProperty.p1);
console.log("newObj2.p1: ", newObj2.p1);
console.log("newObj2.deepProperty.p1: ", newObj2.deepProperty.p1);
console.log("newObj2.deepProperty.veryDeepProperty.p1: ", newObj2.deepProperty.veryDeepProperty.p1);
})();
@hdvianna
Copy link
Author

The idea here is to use two know design patterns factory methods and prototype to create deep copies of javascript objects.
The factory is responsible for creating the object structure whereas the clone method decides which complex attributes to clone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment