Check out a free preview of the full JavaScript: The Hard Parts, v2 course
The "Prototype Chain Example: Implicit Parameters" Lesson is part of the full, JavaScript: The Hard Parts, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Will answers questions from the audience regarding whether only functions can be referenced on the prototypal reference chain, and a clarification as to whether an Object.create() argument is always the `__proto__` property. How to visually see the `__proto__` property in the console is briefly covered. The execution context created when a function called on the prototypal reference chain is diagrammed, and it's demonstrated how the implicit parameter set in the execution context allows the function work with individual objects despite being shared.
Transcript from the "Prototype Chain Example: Implicit Parameters" Lesson
[00:00:00]
>> Will Sentance: Ethan's gonna because it's gonna down further over to Ethan.
>> Ethan: So user function stores an object but it can contain anything other than functions to right?
>> Will Sentance: Yeah, absolutely, absolutely.
>> Ethan: And you'd reference it the same way.
>> Will Sentance: Yeah, yeah, it also by the way, we'll see you later on may also have a hidden proto property on it as well.
[00:00:23]
My goodness, it was the later on Ethan go ahead.
>> Ethan: So the argument that object.create accepts is that the, that is always the Proto?
>> Will Sentance: Well first that is always thought in the Proto. Yeah, very well put, thank you. You want to follow up on that?
>> Ethan: No, just clarifying.
[00:00:43]
>> Will Sentance: Yeah, that's a great clarification question. Putting it another way.
>> Ethan: Instead of referencing MDN at this moment, I'm just ask you. [LAUGH}
>> Will Sentance: It's a true fact, object.create creates an empty object with a hidden proto property. Now, I will say this, that property is not as hidden as our Lexical scope property.
[00:01:04]
That one you can't see, or our own fulfilled array. No console shows that for some reason. This hidden property if you in the Chrome Dev tools were to console log user1, you'd see the little down arrow in the Chrome Dev tools console. If you click that, you'd see this proto property and a link to user function store.
[00:01:24]
So this is one that's hidden but you can see it. Yeah, more, go ahead.
>> Ethan: So technically it's deprecated but you can use .getPrototype of I think, which is a new method of actually getting it officially.
>> Will Sentance: Excellent.
>> Ethan: But the browser wonks probably move __proto because it's kinda built-in forever.
[00:01:44]
>> Will Sentance: Perfect, we maintain the consistency of the history of JavaScript. Excellent, always working with it. All right, people, so let's now, yeah, let's now actually go ahead and run that increment method. There's my execution context, I'm ready to go. Let' just be really clear, as always, this execution context is gone, popped off the code side.
[00:02:20]
Let's go in and run increment. Local memory is usual. Let's just put it there. I want to ask something, increments code we can see I put it in one line there, but, Braden, what is its code? Just give me the exact words, what I've sometimes asked for to relate in the exact words, right?
[00:02:38]
What is its code?
>> Braydon: This.score ++.
>> Will Sentance: This.scorel++. Here's the problem, this increment function doesn't need to work on user 1, doesn't need to work on user 2, doesn't need to work on user 403. Yeah, exactly. All of them. So this increment method. I guess if I wanted to work on user1, inside of it, I'm going to need to write user1.score ++.
[00:03:08]
So that they can go and look for us one find the school property and implement it. But then the problem is by then run it user2.increment and inside running inside of increment ran user1.score++. So I need this method this function to be working on user1 or user2or user4 or user405.
[00:03:35]
Don't panic, I have an amazing thing. I'm in my local memory too small with me. I've an amazing thing called an implicit parameter. That means one, I don't even specify. It's one that's automatically there and automatically filled in for me. And it's called this. As soon as I start running this method increment in my local memory, you know what I get?
[00:04:00]
Without parsing the view just automatically, I get an implicit parameter placeholder. Implicit meaning I didn't write it, it's there for me, this and what do you think it's gonna have automatically assigned to it Todd?
>> Todd: User1.
>> Will Sentance: User1, whatever is to the left hand side of that dot, that matters being run on that, on that object.
[00:04:23]
Whatever object's on left hand side, there will be User1. In fact all functions and global automatically however this but besides a couple of other interesting cases we're going to see today that this is always there is a talk about it. In user creates we had of this, but it referred to something that was not too useful.
[00:04:46]
This is a funny global object concept in JavaScript window or global object you may have seen it once or twice. And so if we were to try and use this, inside a user creator, we'd be pointing off some funny global object thing. Some sort of random little object thing.
[00:05:03]
It wouldn't have not much use, but when instead it's a function increment, thus being called upon the user 1 or the user 2 object. But therefore needs to be general, reusable on each of these objects. Thank goodness we have this implicit parameter. This little place holder, here's our one key rule, it always attaches to itself the object to the left hand side of the dots on which that function is being run.
[00:05:35]
So what does this .score++ Todd, evaluate to turn into?
>> Todd: User1.score++.
>> Will Sentance: Very nice one, Todd. Use1.score++. User 1 not in local memory, we head out to global, there it is. Score, increment it to 4. Beautiful, yeah. Folk, we're gonna see another major use of this. Keyword, there we go, every time another major user in a moment.
[00:06:11]
But for now this is our key use, run a function that shared or going to be available to many different objects through the proto link. And make sure we write it with the keyword this to access the object on which that method, that function is being executed to the right-hand side of the dot.
[00:06:31]
Thumbs on this people.
>> Will Sentance: Yeah, Jason. We'll go to Mark. Jason first, then Mark. Go ahead, Jason.
>> Jason: Are we explicitly working with namespaces when this operator is in play, because of the scoping requirements where it has to go look to find our value.
>> Will Sentance: We all absolutely knowing that the this inside of here is related to, it is only within this execution context.
[00:07:05]
Where is the this coming from though? We'll see in just a moment that we can play with it in some interesting ways. We'll see in a moment, Mark?
>> Mark: Is this local execution context? We're explicitly talking about this. But it's accessing score up in global memory, or changing it without say a return value, which we've done traditionally.
[00:07:30]
>> Will Sentance: Sure, so you're saying this might be like a, you're cautious about this as a sort of side effect type thing. Yeah, absolutely, absolutely, and that's why, but it's totally standard within this model. And it's not inherently problematic. But it is why we have to accept that, if we're taking this model, if we're organizing our code, there's trade-offs.
[00:07:53]
Huge benefit, my data or my functionality or the availability of that functionality bundled in one place. Problem, around the functionality, it can have consequences anywhere in my code base, ideally, though, only within the object I'm trying to target. But maintaining this sort of code base can be definitely have its ups and downs.
[00:08:12]
Very fair question from Mark.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops