Created
May 28, 2019 19:41
-
-
Save hdvianna/6f1eb5f15048937f17dd0fc21a9685dd to your computer and use it in GitHub Desktop.
A pattern for deep cloning objects in javscript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.