What this Means in JavaScript
In JavaScript, this is a reference to an object, but it depends on how and where we use it.
In a Node environment without strict mode, this refers to the global object.
In browsers, this refers to the window object.
When strict mode is enabled, this inside a normal function becomes undefined.
So the value of this is not fixed. It depends on who is calling the function.
this Inside Normal Functions
Inside a normal function, this usually refers to the global object (or the window object in browsers).
Example:
function thisFn() {
console.log(this)
}
thisFn() // global object...
Here the function is called directly, so this refers to the global object.
this Inside Objects
Inside an object, this refers to that object.
Example:
const f1Team = {
team: "Ferrari",
playerMSG: "I have the seat full of water",
teamRadio() {
console.log(`${this.team}: must be the water`);
}
};
f1Team.teamRadio();
Output:
Ferrari: must be the water
Here this.team refers to the team property of the f1Team object.
Because the object f1Team is calling the method.
Function Borrowing
Sometimes we want to use a method from another object.
JavaScript allows this using:
This concept is often called function borrowing.
It lets one object use a function that belongs to another object.
What call() Does
call() gives us the power to control what this refers to.
We can call a function and explicitly tell JavaScript which object should be this.
Example:
const f1Team = { team: "Ferrari" };
function strategy(planA, planB) {
console.log(`\({this.team}: \){planA} \({planA}... actually \){planB}... actually ${planA}`);
}
strategy.call(f1Team, "Box", "Stay out");
Output:
Ferrari: Box Box... actually Stay out... actually Box
Here we used call() to run the function with this referring to f1Team.
What apply() Does
apply() works almost the same as call().
The only difference is how arguments are passed.
With apply(), arguments are passed as an array.
Example:
const f1Team = { team: "Ferrari" };
function strategy(step1, step2) {
console.log(`\({this.team}: \){step1}... let us check ${step2}`);
}
strategy.apply(f1Team, ["Plan A", "the spreadsheet"]);
Output:
Ferrari: Plan A... let us check the spreadsheet
So the difference is simple:
What bind() Does
call() and apply() execute the function immediately.
But bind() works differently.
bind() does not execute the function immediately. Instead, it returns a new function with this permanently set.
Example:
const f1Team = { team: "Ferrari" };
function teamRadio(driverMsg, engineerReply) {
console.log(`\({this.team}: Driver: \){driverMsg}... Engineer: ${engineerReply}`);
}
const ferrariRadio = teamRadio.bind(
f1Team,
"Tyres are gone",
"Telemetry says they are fine"
);
ferrariRadio();
Output:
Ferrari: Driver: Tyres are gone... Engineer: Telemetry says they are fine
Here bind() created a new function where this is always f1Team.
Difference Between call, apply and bind
| Method |
Executes Immediately |
Arguments |
Returns |
| call() |
Yes |
Passed normally |
Result |
| apply() |
Yes |
Passed as array |
Result |
| bind() |
No |
Passed normally |
New function |
this in JavaScript depends on who is calling the function.
Inside objects, this refers to the object.
Inside normal functions, it usually refers to the global object.
And when we want to control the value of this, we can use:
These three methods allow functions to be reused across different objects.
