Name: Understanding function bind() in JavaScript
Uploaded: 2015-08-05T10:03:32-05:00
Description: Changing context in JavaScript is only possible using call() and apply(). The bind() method on the function prototype use those methods to allow us to quickly change the context in which a function is executed in. Learn how bind works by recreating it.

Changing context in JavaScript is only possible using call() and apply(). The bind() method on the function prototype use those methods to allow us to quickly change the context in which a function is executed in. Learn how bind works by recreating it.

https://app.egghead.io/api/v1/lessons/javascript-understanding-function-bind-in-javascript/subtitles

Understanding function bind() in JavaScript

[00:00] In this lesson, we're going to talk about function bind and how it works. We'll also recreate it. Right here, I have this function bark, which we'll count as [indecipherable] dog bark noise. Bark looks like a free flowing function, but there are actually no free flowing functions in JavaScript. They're all attached to objects.

[00:14] In this case, because there's nothing rising in .notations [indecipherable] to the left, the bark function's actually attached to some global objects and JSPIN has created that for us. Unless that global object has a bark noise property, that's going to be undefined. What we want to do is be able the call the bark function in the context of dog so it actually does say the bark noise, which is this string here.

[00:35] If I run this without changing the context, you'll see we get undefined. But we actually have this .bind method on the functions that it can actually pass in a different context. That's going to return a function that we can invoke. Now, if I run it, we get the bark, bark, bark. We're going to recreate that to see how it works.

[00:53] What we'll do is we'll make a new method on the function prototype here, and let's call it glue, so we can see how this works. The first thing we want to do is we know this is going to take in a context, because that's the thing that we want to do actually. We have that, and then we actually want to go ahead and save a reference to the actual function that we're trying to call.

[01:17] We'll say that. That's actually going to be this. Then for any possible arguments that may or may not have been passed into this call to glue, we want to reference those.

[01:27] We'll call this outer args. The reason I'm naming this outer args is because the glue or the bind method actually returns a function, which may have args, too. We need a way to differentiate between them, too.

[01:39] I'll do that .slice.call on the arguments array and everything after the context, if anything. Then now, I can go ahead and return that function that we're going to call. This function's going to be given a new context here.

[01:56] I want to grab any possible arguments that were passed in here. We can say inner args, and it's going to be the same thing, .slice.call arguments. You can pretty much make a copy of that.

[02:15] Then what I can do now is I can say fn, which is our function, and, in this case, I'm going to use apply because we already have the array of arguments and apply takes an array. The context that I want to pass in was the one that was passed in to the original method, and then pass in the composed argument. I can say .concat.

[02:36] The first thing I want to pass in is the outer args because those, if they were given, they were given first, and then the inner args. Now, if we come down here, if we say bark.glue, pass in dog, we immediately invoke just like bind, we run this, and we get bark, bark, bark. That's how a function bind works.

Understanding function bind() in JavaScript

Share this video with your friends