This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Object.create()" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: I mentioned at the start of the exercise, don't use object.create for this, cuz you could. And, then online there's a few questions about object.create, as well. Let's talk about what object.create really does. So this has actually been around for a little while. But, it lets us do stuff like this.
[00:00:22] So here is animal. I put an init function on here. Init is nothing special, it's just our concept of a constructor function, it means nothing, it's just an additional property in this case. But here we have an object with two functions, init and eats. And in memory, that's going to create this, it's an animal object with init and eats as properties.
[00:00:49] Then we can say chordate equals object.creates, and we're gonna pass in the object we want to inherit from and any additional properties we want to set on ourselves.
>> Justin Meyer: Which will create this. It'll create a new object with its own properties, and its proto will point to animal.
[00:01:11] Now, this is the actual memory footprint, you'll notice there are no functions, there's no prototypes, this is just two objects with a proto property set correctly. We can do the same thing again for mammal. If we say object.create with chordate, it'll set our proto property of mammal. It'll also set has hair as an additional property on our new object.
[00:01:36] So when we finally say m equals object.createMammal, this is basically our newest mammal, and then we can say m.init dog, because we don't have a concept of passing arguments into a constructor function because these are all just objects. So within init, we can say pass in dog, because we're using .call, this will be m, the new instance of mammal.
[00:02:02] You'll notice, let me get the last circle on the graph, this is a lot smaller footprint, it would seem, right? So why would we ever not use Object.create? And this is a tricky kind of thing, because one, there's kind of two philosophies on whether this is good or bad, but the truth, as far as performance goes, is this is really slow.
[00:02:32] This is much much slower, magnitudes slower, than just using the new keyword. The reason is, at least at the moment, now this could change in the future as implementation change, but the moment, internally, object.create is gonna call the same methods internally that new calls. When new set up a new object, object.create is gonna do that same thing first behind the scenes.
[00:02:55] Then, it's gonna set the internal prototype, which is the proto, not to make things weird, cuz behind the scenes it's named prototype with two square brackets. Anyways, it's gonna set the proto again, after invoking the new functionality. And then, third, it's gonna call defined properties behind the scenes.
[00:03:19] So it's gonna do what we had originally, you don't need to create all the functions, but from our perspective, from outside, this seems a lot easier to comprehend than protos and prototypes. But behind the scenes tt's doing everything we did originally, and two other steps. This ends up being really slow, at least until implementations change.
[00:03:41] And this is, when I mean slow I don't mean slow in IE six, I mean slow like now in Chrome latest. So be wary of this. There's nothing wrong with using this, it's completely acceptable, this works, but just be aware of performance implications.