Check out a free preview of the full The Hard Parts of Object Oriented JavaScript course

The "Objects default __proto__" Lesson is part of the full, The Hard Parts of Object Oriented JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will uses an example to further explain how __proto__ is built into every object in JavaScript. In addition to __proto__, hasOwnProperty is a built-in method that has bonus functionality afforded to it.

Preview
Close

Transcript from the "Objects default __proto__" Lesson

[00:00:00]
>> Will: What are we doing in our first line of code here, if you can just verbalize that for me so I can then diagram it out and we can make sure we're continuing to refine our technical communication. What do we do in that first line of code there, Suzie?

[00:00:11]
>> Suzie: We have a cons, obj.
>> Will: Obj, [LAUGH] we can pronounce it obj.
>> Suzie: Or obj.
>> Will: Obj.
>> Suzie: Object.
>> Will: I don't know if that's allowed, but yeah, obj, exactly. And it is?
>> Suzie: An object.
>> Will: An object, fantastic. There it is. Okay, and what properties does it have immediately assigned to it?

[00:00:31]
>> Suzie: Num.
>> Will: Num.
>> Suzie: Properties.
>> Will: Yeah.
>> Suzie: Value of three.
>> Will: Fantastic, well put, okay, now, let's go and access it. And the very next line Michael, talk me through accessing it.
>> Michael: We are calling obj and-
>> Will: Careful using the word calling for an object, that's for functions.

[00:00:49]
So I would guess we are looking up pbj or we're referencing obj or we're, yeah, we're looking at memory for obj and we find it.
>> Michael: Yep, we get the property name, num.
>> Will: Yeah, exactly which is the value?
>> Michael: a 3.
>> Will: 3, right. Easy, or maybe not, or maybe easy.

[00:01:09]
It's uses next property. Obj.hasOwnProperty and it's a function that takes in an argument the string num. Let's do the lookup. Michael. Where do we look for obj?
>> Michael: In the memory.
>> Will: In global memory, spot on, yeah. Do we find it?
>> Michael: Yes
>> Will: Yes, where do we look for hasOwnProperty?

[00:01:42]
We look for it on on the object right, it's just like num, we're looking for it. We found num, it was there, we looked for hasOwnProperty, is it on there?
>> Michael: I don't see it.
>> Will: It's definitely definitely not but we do look on the object, because it's a property of obj, which we're trying to access.

[00:01:58]
Do we find it?
>> Michael: No.
>> Will: No, do we give up?
>> Michael: No.
>> Will: No, where do you think we might go and look? What hidden property?
>> David: [INAUDIBLE]
>> Will: Yes, David. I meant to ask somebody, but that is spot on, you're right. A hidden property proto. A hidden property proto, but where's that linking to, okay, now we need to know about something that is built into JavaScript as soon as we turn on JavaScript.

[00:02:29]
[INAUDIBLE] as soon as we start runtime, our JavaScript engine up. As soon as we do so, it automatically adds in the background this, that word is ruined. Automatically adds, wait for it, a function object combo with the label object. Well, what would object be do we think? Well, probably an object, no, it's a function object combo.

[00:03:01]
It's a function, how do I show these as being fundamental? They're built in, we don't assign these, we don't declare these. I'm gonna use orange to sort of mark off stuff that we're not assigning. It's there in JavaScript by default, okay? Not very clear though, I don't know.

[00:03:26]
It's in memory, but we're not putting there. And one of the first things in there is called object. It is a function, it's actually a function that by the way when called with a new keyword it's gonna return us an object, but we don't need to worry about that for now.

[00:03:44]
It's just an object. Is that right? No, it's not, it's a function, but as a function therefore, must also be an object. So it's a function and also an object, okay?
>> Will: There it is, there's the object, there's the object.
>> Will: That object by default as all objects in function object combos have, has what property do we think Chris, what all objects in function object combos have a property by default.

[00:04:16]
>> Chris: Prototype?
>> Will: Fantastic, thank you Chris, yes, prototype. Which is itself a big old object,
>> Will: A sub-object I guess, and that object has,
>> Will: A function on it, a property on it called has own property. It has a few others like four or five others, one's called, I don't know.

[00:04:44]
What are they called? Two local strings, is that a few others on there? There it is, has own property. And this object here is what our underscore proto underscore points to to this object here. The object.prototype. So we'd see in here the word object.prototype. So Seth for me look at process on obj that has on property that jobs will actually follow.

[00:05:19]
>> Seth: So it's gonna look on obj in government ring. It's not gonna find it there, it's gonna freak out a little, then it's gonna look in the proto, look in the object, look at its prototype, find has own property, and then be happy.
>> Will: Fantastic, excellent, it's gonna call it, and check on obj that num exists, and give us back true.

[00:05:43]
Okay, folk this is to say, I would call this dog fooding. JavaScript dog food, that's that phrase meaning we use our own product. Dog foods, its own prototype or nature. It wants all of its things it creates, that we create, but also any objects that it creates, any functions to all have access to a bunch of bonus functionality.

[00:06:02]
They could have used any language. An array in Ruby or a dictionary in Python, they all have access to certain functionality. But where's that coming from? Well, in JavaScript it's coming from using its own very prototypal nature to give access to a bunch of shared functions. They're not mysteriously under the hood, hidden away.

[00:06:24]
They're right there, I can literally go console log. obj.dunder score per dunder scorehasOwnProperty, and it will show me that function that I can use. It is right there, these are not buried. These are not like implementations in JavaScript under, in Machine code under the hood of Java, so these are JavaScript implementations.

[00:06:46]
Very interesting, okay. So what this means folk is when we in our creation of user 1 get an object that says name fill score for dunder score proto dunder score is usercreator.prototype, go grab those functions there. Well, hold on, do we lose access to hasOwnProperty? No, because that, we're gonna see in a moment, don't worry, that object that has increment and log in on the prototype object itself, is an object.

[00:07:25]
So itself has a proto reference, a proto property which leads up to object.prototype. It's a chain of links up and all what we do is we intercede, in that chain. We say, okay, user one, you're dunder proto dunder, is going to refer to Usercreator.prototype which is an object.

[00:07:51]
That object has its own dunder proto, so if we don't find has our own property on that object, because we've only got increment and login on there. We head up to the next one object.prototype which is where it's at exactly.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now