Advanced JS Fundamentals to jQuery & Pure DOM Scripting Exercise 11: Implementing $.proxy()
Transcript from the "Exercise 11: Implementing $.proxy()" Lesson
>> Justin Meyer: What $.proxy does is it takes a function and makes sure it returns a new function that this will be called with any particular context you pass it. So let's say here I have a dog object with a speak function.
>> Justin Meyer: Now I can create a speakProxy function.
[00:00:28] By the way, if you're familiar with function's bind method, this is pretty much does the exact same thing. I can make a speakProxy, so this returns a function that I can call that function directly. Or, I can pass it to a setTimeout or do whatever with it. And it will always, when this function is called, it will always call dog.speak with this as dog.
[00:00:56] This is the this you want and this is the function.
>> Justin Meyer: So if I did something like that, right, if I ran this in the console and hit Enter, the timeout eventually it would say fido says woof, just like we want it to. All right, the reason, I'll kind of go into this since it's kind of not why you just can't pass dog.speak here.
[00:01:27] I'll explain that real quick before we start the exercise. I'll actually explain that right now cuz I think it will be helpful. So, let me copy that code.
>> Justin Meyer: Okay, so here's my dog.
>> Justin Meyer: So if I did something like this, speak equals dog.speak and call speak,
>> Justin Meyer: With something.
>> Justin Meyer: What's gonna happen here?
>> Justin Meyer: See if you guys remember the rules for the dot, or for how this works.
>> Speaker 2: It's a undefined says something.
>> Justin Meyer: Undefined says something, exactly right. And that's because we're calling a function. If you see a function called just with the call operator there's no dot.
[00:02:42] If I didn't do dog dot, I didn't do something dot speak. What's gonna happen inside this function is this is always gonna be the window. So what $.proxy does it makes it so I can I can go $.proxy speak dog. Actually, this is not the best example, I'm just gonna say says hi.
[00:03:10] Get rid of the words. I can say, and then I can just call speak and $.proxy will make it so when I do this it's gonna say Fido says hi.
>> Justin Meyer: All right, because $.proxy will make sure that when this function that is returned is called, even though it's called like this, no matter how it's called It's still gonna have this as what you expect it to.
>> Justin Meyer: Now a lot of times people get confused. They would think that, why can't setTimeout do something similar? If I did a setTimeout and did dog.speak and a second, why doesn't that work? The reason is is because, let's say I implemented setTimeout myself. And put in a, it would take a callback, and it takes some time.
[00:04:06] And let's say I had some access to some system timer and I could do set wait, somehow,
[00:04:34] So even though we passed dog.speak we're still passing a reference to a function. So when that function is called, because it's called without the dot operator, it would be undefined says hi.
>> Justin Meyer: Hopefully that makes sense. So what we're gonna try to do is to create a proxy, a $.proxy, is what you guys are going to try to create.
[00:05:01] That, or I guess it's up here.
>> Justin Meyer: And I'll give you a hint about it, it's gonna return a function.
>> Justin Meyer: It's gonna return a function that's going to call this function so that this is the context.
>> Justin Meyer: So that's all the clue I'm gonna give you. Let's struggle for another seven minutes and I will, if people have questions or need help, I'm here, so is Alexis.
[00:05:39] Let me put this up.
>> Justin Meyer: So this is what we're gonna try to do, is $.proxy.