The full video and many others like it are all available as part of our Frontend Masters subscription.

Kyle Simpson

Kyle Simpson is an Open Web Evangelist from Austin, TX, who's passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contributor/leader.

Kyle Simpson

You Don't Know JS

In JavaScript, every object is built by a constructor function and does not mean classes are being instantiated. When a constructor function is called, a new object is created with a link to the object's prototype.

Get Unlimited Access Now

Kyle Simpson: We now are going to transition in to a discussion of object-orienting which is our next major thing in Java Script. So, we've spent the majority of the day so far talking about scope and closures then this key word. Now we're going to transition in to a discussion of object-orienting, which is the other major area of JavaScript that has a lot of confusion, a lot of complexity to it.

We're going to try to rip away all that complexity. I will give you the fair warning that where we're headed, what I'm about to teach you over the next hour, or hour and a half or so with this object-orienting stuff, is significantly divergent from what the vast majority of the JavaScript community believes about the language.

This is my own personal take on how I think it's a much better way of thinking about JavaScript, but it requires you to actually have a very different mindset. Because you come to the language most likely with the assumptions about the way classes work and you try to make Java Script work with classes and the punchline is that we're headed towards me teaching you that there are no such thing as classes in Java Script.

And that we have to have a very different, not just a different syntax but a very different design pattern for our software, and that's where we're headed, okay. So, we're going to first, I was going to talk about these common OO patterns. There's a couple of slides there where I show off the Singleton pattern, the Observer pattern.

They probably speak for themselves so just in the interests of time I'll probably skip over those slides, and we'll go right into our discussion of the prototype mechanism.
Kyle Simpson: So I'll skip over a couple of these. If there are any questions and we have some time at the end I can go back and answer any questions you may have.

But just kind of showing some ways that you might implement common design patterns with JavaScript code. All right, so any discussion about object orienting in JavaScript requires us to discuss the prototype mechanism. Okay? Every single object, when it is constructed, it's built by constructor function. And really, to be most accurate, it would accurate to say that it's built by a constructor call.

And I already showed you how that works. Remember, when we call new with the function, it creates an object. That's not the same thing as instantiating a class, it's just that it constructs objects. As a matter of fact I would push back on nearly two or three decades worth or precedent.

The fact that we have languages like C++ and Java that are called object oriented, those are kind of a misnomer because those languages should have been called class oriented. In fact, there's only two languages today, right now, and one of them you know about, JavaScript. The other one, you may not have even ever heard of.

That language is Lua. Those are maybe the only two languages in existence today which actually deserve the moniker object oriented, because they're the only languages where you can actually create an object without a class. And all the other languages are all about classes and classes getting instantiated in objects.

Unfortunately, that ship has long since sailed, so we can't really do away with that object-oriented moniker, but it's an inaccurate term for what's happening. Because these constructors in JavaScript, they're not building from classes, they're just creating objects out of thin air. But every single object that gets built, gets built by calling one of these constructor calls, either directly or indirectly.

And each time one of those constructors is called a brand new object is created. So it lends itself to you thinking that there's an instance happening, when in reality it's not actually an instance. It's often said that a constructor makes an object based on, that constructor's prototype, and it is that phrase, based on, that I take most objection to.

Because the phrase, based on, begins to imply something about the language that's not actually true. It's something is very true in all the other class oriented languages that you're aware of. C++ and Java and All those other ones, but it's not true of JavaScript. Based on implies that we take the prototype and we stamp out a copy of it.

That's the way it works in class-oriented languages, when you have a parent class, and you instantiate that parent class, there's a copy of the behavior of the class into the instance. And once the two have been separated, there's no more relationship between the two. I have an instance that was a copy of a parent, but that's not what happens in JavaScript.

So the phrase based on really leads us down the wrong path. So I would say it's more appropriate to say that a constructor makes an object that is linked to the constructor's prototype. And there are people that will say these are one and the same and I would push back and say these are fundamentally different mechanisms.

Okay. So what do we mean by linked to? You might remember when I discussed the new keyword. I talked to you about those four steps and I told you there was 0.2 that it was the things that it did was that it linked to an object. And I said put an asterisk there because we're going to come back.

Now we're going to talk about what that linkage means. What do we mean that a constructor is making an object link to some other prototype object? What does that really mean?

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now