This content originally appeared on Bits and Pieces - Medium and was authored by Basharath
The keyword this in JavaScript can feel like a muddling concept because its value depends on where it is used. Often it tricks developers and sometimes it can be the culprit behind unexpected results.
Let’s discuss this this keyword with simple and easy to understand examples before actually delving into the call, apply, and bind methods as this keyword is the main reason for having those methods.
What is this in JavaScript?
The this keyword in JavaScript refers to the object that the function is a property of and this will depend on the object that is invoking the function.
To get a quick idea of this have a look at the code snippet below.
const myObj = {
name: 'John',
age: 25,
place: 'London',
myFunction: function() {
return this;
}
};myObj.myFunction();
// {name: "John", age: 25, place: "London", myFunction: ƒ()}
In the above code snippet, you can see that when myFunction method is called it returns the value of this, which is nothing but the myObj itself. If you recollect the definition for this in the previous paragraph, it says this refers to the object that the function is a property of, so here myFunction is a property of myObj, which means this is referring to that myObj object.
A simple trick is whatever precedes before .(dot) is the object referenced by the this keyword. So before .(dot) in myObj.myFunction() is myObj, which is the value of this.
Let’s take another example to understand this:
function myFunction() {
return this;
}myFunction(); // window or undefined(in case of 'strict mode')
In the above code we are returning this from the myFunction, so when myFunction is called what we see or get is the value of this.
Again if we recollect our definition of this, it refers to the object which the function is a property of. Here our function myFunction is a property of global object nothing but the window object in the browser, so which means when we call myFunction the value of this is going to be the window object.
If we go by our trick of .(dot) preceding the function, here there’s no dot but every function is a method in the window object, so it translates to window.myFunction() so here, the this keyword refers to the window object.
In order to avoid functions getting attached to the window object, we use strict mode so as a result window will be undefined in such cases.
So keep in mind our definition as we’re going to use that for understanding call, apply and bind methods.
The this keyword in JavaScript refers to the object that the function is a property of, and this will depend on the object that is invoking the function.
Understanding call, apply, bind in JavaScript
Let’s consider an object person with a property name and a method details.
const person = {
name: 'John',
details: function(age, place) {
return `${this.name} ${age} years old, lives in ${place}`
}
}person.details(25, 'London'); //John 25 years old, lives in London
When we call the method details on person object with the arguments, we knew that this refers to the person object because details is a property of the person object and so this.name would be John and so the result that gets returned will be as shown in the comments.
This part is going to be clear as we knew what this means in the person object.
Let’s consider a scenario where we wanted to use the details method but with different arguments.
As per the details method we can pass in different age and place values but how about the name, as it is connected with the this keyword? This is where we are going to use those special methods call, apply and bind. Let's dive into those.
call
Now we want to associate a different object other than person to this keyword of details method. So to do that we're going to use the call method as shown below in the code snippet.
person.details.call({ name: 'James'}, 30, 'Tokyo');
// James 30 years old, lives in TokyoA call method takes a new object that we want this to refer to followed by the arguments to the function(nothing but the details method) and it gets called referencing this to the new object passed as the first argument. Voila! That's what a call method is.
apply
Guess what, apply method is just the same as the call method, that is, it takes a new object as the first argument to reference the this keyword and is followed by an array of arguments. So it means you can simply pass the arguments to the details function in the form of an array instead of passing individually. Have a look at the code below so it becomes clear for you.
person.details.apply({ name: 'James'}, [30, 'Tokyo']);
// James 30 years old, lives in TokyoSo call and apply methods are used to reference a new object to this keyword on methods.
And then what bind is for? Guess!
bind
When call and apply methods are applied they are called(invoked) directly referencing the new object passed but in order to get a new function reference that can be used to call at later times, the bind method is used. Have a look at the code snippet below to get more clarity.
const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');personDetails();
// William 40 years old, lives in Rome
So using the bind method returns a new function reference which can be called at a later time and that is all about the bind method.
So putting all the three methods together:
const person = {
name: 'John',
details: function(age, place) {
return `${this.name} ${age} years old, lives in ${place}`
}
}person.details(25, 'London'); //John 25 years old, lives in London
// Using call
person.details.call({ name: 'James'}, 30, 'Tokyo'); // James 30 years old, lives in Tokyo
// Using apply
person.details.apply({ name: 'James'}, [30, 'Tokyo']); // James 30 years old, lives in Tokyo
// Using bind
const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');
personDetails(); // William 40 years old, lives in Rome
So in short CAB (call, apply, bind in JavaScript) are used to reference a new owner object to the this keyword. Hope this article has demystified the call, apply and bind methods in JavaScript.
Did we miss anything here? Yes, the this value will be different when we use an arrow function. See you in the next article.
I’ll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.
Build apps like Lego. Have more fun.
We all like playing with Lego. A box of modular pieces means we can compose anything we imagine, by ourselves or with others.
Yet, we develop most our applications as monoliths, where all the code is internal, coupled, and can’t be used anywhere except in this one app. This is slow, painful, and not much fun.
But what if we could build independent components first? And then use them to compose as many applications as we like, alone or with others?
OSS Tools like Bit offer a great developer experience for building independent components and composing applications. Every component can be used in many projects, integrated with other components, and shared with your team.
Learn more
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- Microservices are Dead — Long Live Miniservices
Demystifying Call, Apply, and Bind in JavaScript was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Basharath
Basharath | Sciencx (2022-01-19T11:29:09+00:00) Demystifying Call, Apply, and Bind in JavaScript. Retrieved from https://www.scien.cx/2022/01/19/demystifying-call-apply-and-bind-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.