Object.create is the new(ish) new.
Even though it might look clunky compared to the sleek profile of the "new" keyword, Object.create is a method, that Douglas Crockford--everyone's favorite grumpy granddad of JavaScript--created to circumvent what he saw as problems with the "new" keyword.
Object.create() is a pretty straightforward method.
It takes one mandatory parameter and one that's optional (and that you should probably not use).
The first parameter is the object that you want to use as the "parent" object, from which your brand new, bouncing baby object will inherit its methods and properties.
const babyObj = Object.create(parentObj);
The second parameter essentially equates to Object.defineProperties. (If you're not familiar but want to be, check that out here. But all you really need to know is that this optional parameter lets you add properties to your new baby object, such as how this new babyObj below has a property of 'bad:idea' added on to it.)
const babyObj = Object.create(parentObj, { bad: {value: idea} })
The syntax in this second parameter is super clunky, though. So, real talk: don't use it. Just make your new baby object, and then use good old dot notation to add any new properties you want, after the object has been created.
And just like that, you have a brand new dependent babyObj who inherited all your (possibly flawed) properties.
From here, babyObj will go on to acquire new properties of its own that will make no sense to you and that you won't be able to access or understand.
It's like if your baby object grows up loving Run-D.M.C. because of course your baby inherited all your good taste in music, but then baby object starts listening to Post Malone and actually seems to enjoy that--which is a property that you, dear parent object, definitely do not have and that your baby object did not inherit from you.
In that case, you can't suddenly also listen to Post Malone and claim that as your own property. And you shouldn't try to because you will look really dumb, you'll embarrass your baby object, and the whole world will be like, "wow, that's definitely an error."
Just relax, hold on to your own properties, and watch your baby object move forward in the world, becoming a fully-fledged object of its own, with its own new properties that it might very well grow to regret some day and delete babyObj.postMalone. Your babyObj will still always have the properties you passed on to it.(Even though it could technically overwrite them with its own values, and probably will do so when its in college, but don't worry about that for now. Just enjoy your object being created in your own image.)
In other words, in JS terms, new instances of objects resulting from use of Object.create inherit all properties from the object that was used as the prototype. That means that if you try to access a property on the new object but that property doesn't exist on the new object, JavaScript, being the thoughtful sweetheart it is, will say, "Oh, that doesn't exist there, but I see that I can look up into that baby Object's prototype object, and boy-howdy, that property does exist on the parent/prototype object, so here ya go!" Baby object has access to all properties on parent object, as well as grandparent object, great-grandparent, great-great-grandparent, and so on. All the way up to the original Garden of Eden, capital 'O' Object.
Again, in JS terms, this means failed lookups on the instance of an object will fall up the chain of prototypal inheritance. Should the desired property be found anywhere up the line, the baby Object will have access to that property. But as with Post Malone in the example above, the older objects do not get to access the younger object's properties.
const parentObj = { haircut: "sensible", clothing: "typical"}
const babyObj = Object.create(parentObj);
babyObj.haircut; // "sensible"
Super important to note that the new instance of an object is a brand new object; is it not a copy of the prototype object that it came from, so if you change the parent/prototype object, the baby/new instance of an object will inherit those changes , but if you change the baby/new object, those changes will not impact the parent/prototype object.
babyObj.haircut = "tri-hawk with devil lock";
console.log(babyObj.haircut); // "tri-hawk with devil lock"
console.log(parentObj.haircut); // "sensible"
Besides being used just to make new objects, Object.create really shows off its stuff when used, for instance, in a subclassing example, with pseudoclassical instantiation pattern, which demands that you explicitly set the prototype of all new instances of objects in order to get access to all the sweet properties and bomb-ass methods you set on your superclass constructor function.
const ParentHuman = function(){
this.creature = "individual";
this.haircut = "sensible";
this.clothing = "typical";
}
ParentHuman.prototype.enjoy = function(music){
console.log("Run D.M.C");
}
const ChildHuman = function(){
ParentHuman.call(this);
this.haircut = "tri-hawk with devil lock";
}
ChildHuman.prototype = Object.create(ParentHuman.prototype);
ChildHuman.prototype.constructor = ChildHuman;
const Jr = new ChildHuman();
Jr.creature // "individual"
Jr.haircut // "tri-hawk with devil lock";
Jr.enjoy() // "Run D.M.C." ...(for now)
Object.create solves some problems that existed with subclassing by making it super simple to connect our new subclass with the superclass via prototype. For this reason and more, Object.create is not to be overlooked.
Shiny new things are cool too, but next time you want to create a new object without all the work of rewriting methods and properties, keep Object.create in mind.
Top comments (0)