Compose Objects with Object.assign to Create a Direct Copy
Coupling objects together can create a brittle relationship. If the prototype object is mutated or replaced later in development, that can cause issues to any new implementations of 'child' objects that use those properties. Instead, let's use Object.assign to compose objects. This method creates a direct copy of all properties and does not reference the source object's properties in memory.
Instructor: [00:00] Let's create an object and assign it to a variable called parent. We'll give it a property of hair with a string of brown and a method called heightInInches, which returns this.height * 12.
[00:11] Then we do const child = Object.create, passing in parent. child.height = 6. Then if we console.log child.heightInInches and invoke it, we'll get a return of 72.
[00:27] This is a great example of prototypal inheritance. We have a parent-like object with two properties. Because we use Object.create, passing through parent as the designated next-in-line prototype chain object, we're given a brand-new object.
[00:42] The method heightInInches works in this case because we've assigned the parent object to be the prototype object of the child object. If we did parent.heightInInches and assigned it to a function that just returned true and then console.logged child.heightInInches, you would see that we now get true.
[01:05] It's important to understand that when dealing with prototypal inheritance, you need to remember to not update parent-like objects because it can mess with child implementations further down the road that depend on those properties.
[01:18] As a developer, I would expect to still see 72 here and not true. Instead of relying on the prototype chain that references objects, let's go and change our Object.create to Object.assign. We'll pass through an object literal that has height of six and then ", parent."
[01:38] Now we can remove this child.height. If we look at console.logs, they're now both 72. This is because the Object.assign method is used to copy the values of all innumerable own properties from one source to a target source. Then it will return this target source.
[01:58] Now our child object has a direct copy of all the properties that live on parent. It's not being referenced anymore through the prototype chain. This method heightInInches actually exists on the child object.
If the parent object has nested properties and we create new child object using Object.assign then those nested properties will reference the source object's properties.
const parent = { hair: "brown", body: { skin: { color: "white", }, }, heightInInches() { return this.height * 12; }, };
const child = Object.assign({ height: 6 }, parent);
parent.body.skin.color = "red";
console.log(child); /// {"height":6,"hair":"brown","body":{"skin":{"color":"red"}}}