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.

Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "Exercise 11: Solution" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

Justin demonstrates the solution to Exercise 11. He also diagrams what is happening in memory when the $.proxy() method is called.

Get Unlimited Access Now

Transcript from the "Exercise 11: Solution" Lesson

>> [MUSIC]

>> Justin Meyer: I'm gonna show you how to write jQuery's proxy method for the most part it's surprisingly simple. So I already showed you that I'm gonna return a function so proxy is a function that returns a function. That calls another function. [COUGH] What this function is gonna do is it's gonna to make sure it's going to call the original passed function.

[00:00:31] It's going to make sure it's called with the right context and also forward any arguments that the original kind of the function that it's returning is called with. So I'm gonna use apply. But I wanna make sure the context to set right. I'm gonna pass in any arguments.

[00:00:52] So I mentioned a little bit earlier that arguments is something. It's essentially when we talked about a call object being created I said that there's this inside there. There's also an arguments object that has a reference to every argument that was passed. So this is going to basically take the arguments that were passed here and forward them to this function but we're gonna give it a different context that was passed.

[00:01:19] And then we're going to make sure we're gonna return the result of calling that function for the result of this outer function. And that is it but I'm gonna to try to explain what's going on in memory because this can be a little bit confusing. But I wanna first make sure it works.

>> Justin Meyer: Cool. Any questions before I do this explanation. All right I'll do this explanation. So let me first show what's going on here. So, in memory. I've got a dog with the name property in a speak function. So, I've made a dog object with a name property and the speak function.

[00:02:06] We've also created our dollar is a function but it also has a proxy property that is another function. So, this is that proxy, it's our proxy function we just created. Now, what is gonna happen when we do dollar proxy. Dollar proxy dog, speak, dog. Well what's gonna happen always when we call any function is a new call object is gonna be created.

[00:02:39] This the right one here? No, these things keep getting drained.
>> Justin Meyer: I'm gonna have to block you guys view while I write this out and then I'll show it. So I'm a create call object, try to create a call object. Our call object. And call objects always know about the function that created them and it's going to get its argument.

[00:03:09] The arguments we're going to be passing is FN and context. So, FN.
>> Justin Meyer: Is going to be a pointer to this function in memory.
>> Justin Meyer: The speak function. And context.
>> Justin Meyer: Sorry if this is small for everybody in the back of the room. Context is going to be a reference to this dog object in memory.

>> Justin Meyer: Should we go right in through the point right there. So we've got a function in context or reference seen. This function in memory, the speak function memory and the dog object. Now what this function is going to do is create another function in memory. So all functions know about their parent object, all the parent call object.

[00:04:18] So that kind of pseudo pointer knows about that and then this is what's gonna be returned as the speak proxy function.
>> Justin Meyer: The speakProxy function,
>> Justin Meyer: I'm just gonna write speak P.
>> Justin Meyer: So then, when the speakProxy function is called with woof. Well that will do the same kind of create a call object with arguments.

[00:05:02] But then it's gonna call.
>> Justin Meyer: Where is my code? It's going to gonna call this inner function. It's gonna call this inner function, create a call object and another call object and now this is getting messy. Create other call object, that's going to look up fn. It's gonna try to look up fn inside.

[00:05:39] Yup. [SOUND] It's going to. So this is the call object for this inner invocation of a function. This is gonna try to look up fn in here, not find it, walk to the parent call object and get fn from kind of the parent function there which is this function.

[00:06:03] And then it's gonna do the same thing for context and get the context and it's gonna call this function with this is it's context and for the arguments that this essentially call object was created with. That's what's going on in memory. I don't know if that helps explain it but that's how I see the world.

[00:06:23] [LAUGH] Maybe I'm going crazy, I don't know. Any other questions about this? Hopefully it makes sense.
>> Justin Meyer: No, yeah? All right. Now we're going to move on to the DOM. Move this out of the way, I guess.
>> Justin Meyer: New Slide.
>> Justin Meyer: Okay, so. Yeah.
>> Student: There's a question why can we explicitly returned fn.apply, instead of within a function?

>> Justin Meyer: I'm not sure what you mean of instead of within?
>> Student: I think. At least my interpretation, he might be asking, why are we returning a function that calls fn.apply why don't we just return fn.apply in one line.
>> Justin Meyer: That's a good question, yeah.
>> Student 2: I think the method signature would be different, because it would be expecting you to pass in context.

>> Justin Meyer: Well maybe. I guess we're interpreting what Alexis just said is I thought I think he's thinking that you could just do. He's wanting to just do something like this or something, right.
>> Student 2: I'm saying is that if you return that function. It's expecting contacts to come in as the first parameter when you then run your proxy function.

>> Justin Meyer: Well this one, the problem with this, is this won't even return the function in the first place, this would just invoke that function that was passed in right away. The reason you might be asking this question is why is there a dollar proxy? That's a fair question.

[00:08:22] If you guys have never needed to do something similar to this. The example that I gave, the shortest example that I gave, was the one from the slide. Perhaps you want to call dog speak function in one second. So you wanna be able to pass hey, in one second call this function.

[00:08:54] JavaScript, when it would call, if you just passed dog speak here, it will mess that up and call this function back with this set to something different. So jQuery has long provided dollar proxy to make it so you can get your functions called with the right this. So you do this kind of behavior a lot if you're doing object oriented programming in JavaScript Where you'll say okay, as result of this AJAX call complete this to do.

[00:09:28] You need that sometimes you often need to make sure that this is set correctly but you need to pass a single callback function to something else. Pretty common. Cool.