In this lesson we talk about .call, .apply, and .bind in order to understand  "explicit binding", or the second rule of discovering what the "this" keyword is referencing in JavaScript.

The "this" keyword: Explicit Binding with call, apply, and bind

[00:00] In this video, we're going to talk about the second rule for figuring out whether this Q is referencing something, and that is called explicit binding.

[00:07] In the previous video, we saw something like this where we had an object and we can call a method on our object. We know that, because Stacy is to the left the dot. Stacy is what this is going to be referencing inside the dot, but what if we did something like this?

[00:23] What if we were to take SayName out of this function? Instead of being a method on the object, now, it's just a function currently on the global scope. Now, what we want to do is we want to somehow call this function in the context of Stacy. What we can do is if we type the function name, every function has a .call property that allows us to do just that.

[00:51] The very first argument that it takes in is the context that you want to call this function is. Now, what happens is SayName is going to be invoked, and this keyword inside of SayName is going to reference Stacy. If we log this, we should see, "My name is Stacy." And there we go.

[01:12] In this example, we're explicitly stating what this keyword is when we do .call, and for the very first argument that we pass for the .call invocation. Now, let's go ahead and say if we wanted to pass a parameter, pass a few more arguments to SayName, what we can do is, let's say we had an array of languages.

[01:34] What we can do here in .call, the very first argument you pass is the context, and every argument after that is going to be passed to the function, just as a normal argument. Let's go ahead and pass in language zero, JavaScript. Language is at one, Ruby, and language is at two, which will be Python.

[01:56] Then here, I shall say line one, line two and line three. We're going to log, "My name is," and whatever the name is, plus, and lang three. What we're doing here is we are invoking SayName in the context of Stacy, it's as if we're going into here and coming up with Stacy.Name. We know a Stacy, and we're passing along three arguments. We have three parameters here.

[02:26] What we should get is my name is Stacy and I know JavaScript, Ruby and Python. Let's see if this works. Perfect. This seems a little counter-intuitive. What if we are able to do something like this? It would be nicer if we could just pass in languages, and some feature in the language of JavaScript would be able to parse these out to us.

[02:52] That's exactly what .apply does, .apply is the same thing as .call, but instead of passing in the arguments one-by-one, you can pass in an array of arguments, and it's basically going to parse it for us here. We should get the exact same log as you did before at that call, because you can now pass in just an array.

[03:13] The very last thing to look at is this .bind property, .bind is almost the exact same thing as .call, except there's one thing that's different. Let's go back to our code before, where we had .call. Now, what we can do is, if we change this to .bind, what's going to happen is .bind is going to return us a new function instead of invoking the original function.

[03:38] If we come in here and do new function, now instead of invoking SayName, it's just going to bind this to Stacy, passing these arguments, and then, return us a brand-new function which we can call later. If I come in here, I'm just going to console.log something right here so that we can see later we're invoking this new function, and we should get the same output.

[04:05] To recap, .call, apply and bind allow us to specifically state what this keyword will be within any given function. .call and .apply behave the same way, they will immediately invoke that function, but with .call, you pass in arguments one-by-one, and with .apply, you pass them in as an array, .bind is the exact same thing as .call, but except for immediately invoking the function, it's going to return you a brand-new function that you can invoke later.

The "this" keyword: Explicit Binding with call, apply, and bind

Share this video with your friends