We have all been frustrated with this
in JavaScript. Let me try to simplify this for you. No pun intended ;)
The reason why many JavaScript developers struggle with this
is primarily because of the dynamic nature of this
and the way it changes its context.
In JavaScript, the this
keyword can be used in the global as well as function contexts. Moreover, the behavior of the this
keyword changes between strict and non-strict modes.
Global Context
In the global execution context, this
refers to the global object (both in strict and non-strict modes).
Anything which is defined in the global scope can be accessed by this
. What this means is that when you're writing code for the browser, this
will refer to the window
object.
let name = 'Chaitanya';
console.log(this.name); // Chaitanya
console.log(window.name); // Chaitanya
console.log(this); // window
Above code example shows that this
here refers to the window
object in the browser.
Function Context
In a function, the this
keyword will by default refer to the global object, when NOT in strict mode. In case of browsers, that is the window
object.
let name = 'Chaitanya';
function myFunction () {
let name = 'Rohan';
console.log(this.color); // Chaitanya
console.log(color); // Rohan
}
myFunction();
However, when the 'use strict'
Strict Mode is on, then this
will remain as undefined
.
Object Context
When this
is inside of an object, it always refers to that object.
let name = 'Chaitanya';
const someObject = {
name : 'Rohan',
age : 21,
greetFunction: function () {
console.log ( "Goodmorning " + this.name );
}
}
console.log(someObject.greetFunction()); // "Goodmorning Rohan"
Using this
with Object Methods
#### bind() Method
The bind()
method creates a new function that, when called, has its this
keyword set to the provided value.
What this does is, it let's us explicitly define the value of this
when calling a function.
let person = {
fName: 'Chaitanya',
lName: 'Chhikara',
getFullName: function() {
let fullName = this.fName + ' ' + this.lName;
return fullName;
}
};
let greet = function() {
console.log('Goodmorning, ' + this.getFullName());
};
var logGreetings = greet.bind(person); // creates a new object and binds person object.
logGreetings(); // 'Goodmorning, Chaitanya Chhikara'
call() & apply() Method
The MDN Docs for call() say: The call()
method calls a function with a given this
value and arguments provided individually.
call()
changes the context of this
by passing the object as the first parameter. If nothing is passed then call()
will point to the window's scope.
The call()
allows for a function/method belonging to one object to be assigned and called for a different object. With call()
, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.
Let's look at the main differences between call()
and bind
method:
call()
accepts additional parameters as well.call()
executes the function it was called upon right away.bind()
makes a copy of the function it is being called on.
Now, call()
and apply()
works exactly the same way but only difference is that call()
expects all the parameters to be passed in individually, whereas apply()
expects an array of all of our parameters.
let person = {
fName: 'Chaitanya',
lName: 'Chhikara',
getFullName: function() {
let fullName = this.fName + ' ' + this.lName;
return fullName;
}
};
let greet = function(age, city) {
console.log(this.getFullName() + ' is ' + age + ' years old and lives in ' + city);
};
greet.call(person, 21, 'Sonipat'); // Chaitanya Chhikara is 21 years old and lives in Sonipat
greet.apply(person, [21, 'Sonipat']); // Chaitanya Chhikara is 21 years old and lives in Sonipat
Thank you for reading this. The content is sourced from MDN Docs and various other corners of the internet. I hope you liked this.