'this' keyword is something that is most important to learn when you are learning js.
since 'this' keyword refers to the current execution context in javascript , so we first need to understand what is execution context and what is binding then we can understand the real application of 'this' keyword.
Let's First understand what is Binding and what is Implicit and Explicit binding
Execution context
There are two types of execution contexts: global and function. The global execution context is created when a JavaScript script first starts to run, and it represents the global scope in JavaScript. A function execution context is created whenever a function is called, representing the function's local scope.
Every execution context has local scope, the lexical scope of its parent, variable and function, etc.
Binding
Binding refers to the association of a function with a specific execution context, which determines the value of the this keyword within the function.
Implicit binding
When a function is invoked as a method of an object, the execution context of the method is implicitly bound to that object. Inside the function, this refers to the object on which the method is called.
const obj = {
name: 'amit',
printName: function() {
console.log(this.name);
}
};
obj.printName(); // Output: amit
Explicit binding
Explicit binding in JavaScript refers to the process of explicitly defining the execution context for a function using methods such as call, apply, or bind.
When obj is in another execution context and function is in another execution context then if we want to invoke the function of that particular object, change the this reference we use explicit binding.
const obj = {
name: 'amit',
};
const printName = function() {
console.log(this.name);
}
printName.call(obj) // amit
//here we are passing obj and execution context of printName function
Methods provided by javascritp like call ,apply and bind used for explicit binding .
How call() method works
call() method accepts two parameters,
1. context which we are providing to the function on which we applied call() method (object)
2. (optional) arguments we want to pass to the function on which call() is applied
let getNameAndAge = function(age) {
console.log(this.name,age);
}
let user = {
name: 'amit',
};
getNameAndAge.call(user,22);
How apply() method works
apply works the same as call() does, but it accepts arguments in the form of an array.
let getNameAndAge = function(country,age) {
console.log(this.name + country + ','+ age);
}
let user = {
name: 'amit',
};
const arr=['India',22]
getNameAndAge.call(user,arr);
How bind() method works
Unlike the call() method of calling the function directly, bind() returns a brand new function and we can invoke that instead.
let getName = function() {
console.log(this.name );
}
let user = {
name: 'Amit',
};
let fn = getName.bind(user);
fn();
How 'this' works when using new keyword'
A new keyword is used to create an object from the constructor function.
When a function is invoked with the new keyword, JavaScript creates an internal this object within the function and the newly created this binds to the object being created using the new keyword.
let Person = function(name, age) {
this.name = name;
this.age = age;
this.details = function() {
console.log(this.name + ' is ' + this.age+' old');
}
};
//first this ={} object is created inside Person then it is passes to person1 object .
const person1=new Person ('amit',22); //here person1 has name , age and details function
const person2= new Person('ankit',18);
when the function is invoked directly inside the global execution context, this keyword points to the Global object (Window object) .
When the function is not inside any object or not binded explicitly with any object.