this keyword in objects
In JavaScript programming this keyword is a reserved keyword, where this keyword indicates an active value reference in the current JavaScript program. Like in a JavaScript function program, a function is called. Specifically, in a function declaring an object method, this keyword automatically indicates a reference to the function value variable object. How this keyword works in a function program, here this keyword is used to access the properties and methods of the function object.
this inside object methods in JavaScript.
When a JavaScript programmer defines a method inside a function object, then inside that function method this keyword automatically references the function object, where using this method object properties and methods can be processed and accessed.
Example of this inside object methods.
let employee = {
empname: “Siddhi”,
empid: 01,
empinfo() {
console.log(“Hi, employee name is – ” + this.empname + ” and employee id is – ” + this.empid + “”);
}
};
employee.empinfo(); // Result – Hi, employee name is – Siddhi and employee id is – 1
Explanation of this inside object methods.
In this program, in empinfo() method, this refers to the employee object. It provides permission to the method to access the empname and empid properties of the employee object.
How does the JavaScript this keyword work in object methods.
This keyword inside an object method in a JavaScript function program, it refers to the object and its properties to which it is associated.
When this keyword is used outside an object or function, its value depends on the reference order of calling that function.
Role of this keyword in different contexts in JavaScript.
In a JavaScript function program, its value can be modified or replaced depending on the call order or pattern of a function. This keyword behaves differently in multiple conditions.
This keyword inside object methods.
When this keyword is used inside a method related to an object in a JavaScript function program, it indicates a reference to the properties of that function object.
Example of this keyword inside object methods.
let employee = {
empname: “David”,
employeeinfo() {
console.log(“Hi, employee name is – ” + this.empname);
}
};
employee.employeeinfo(); // Result – Hi, employee name is – David
Explanation of this keyword inside object methods.
In this program this.empname indicates a reference to the empname property value of the employee function object.
This keyword in JavaScript is global context.
Outside any function or object in a JavaScript program, this keyword indicates a reference to the global object properties in the function. This will be printed in the window object in a web browser.
console.log(this); // This in a web browser, this will print the window object.
Explanation of This keyword in JavaScript is global context.
In this console screen, outside any function or object in the declaration order, this indicates a reference to the global function object web browser window.
JavaScript this keyword inside a regular function.
A regular function in JavaScript is not an arrow function, but its value depends on how the function is called in the program. If the function is called without being attached to any object in the current program, it will indicate a reference to the global object (in non-strict mode) or undefined in strict mode.
Example of this keyword inside a regular function.
function display() {
console.log(this); // here this In a non-strict mode, it will be the global object
}
display();
Explanation of this keyword inside a regular function.
Here this is not a part of any object in the program, so it indicates a reference to the global object window in the browser.
JavaScript this keyword inside arrow function.
JavaScript functions have a literal this keyword in arrow functions, which means this keyword indicates the context around it, not how the function is called with this in arrow.
Example of this keyword inside arrow function.
let employee = {
empname: “Harry”,
empinfo: () => {
console.log(this.empname); // here ‘this’ keyword refers to the surrounding context, not the ’employee’ object.
}
};
employee.empinfo(); // Result – undefined
Explanation of JavaScript this keyword inside arrow function.
In this example, the arrow function does not use its this reference. Rather, it indicates the surrounding context with the this keyword. While the empinfo method is an arrow function, here the this keyword is not bound to the employee object, and it ends up being undefined in a global object or strict mode, which does not have empname properties.
this keyword in constructor function (class) in JavaScript.
In a constructor function or class in ES6, this keyword refers to the instance of the object that is being created.
Example of this keyword in constructor function (class).
function employee(name, id) {
this.empname = name;
this.empid = id;
}
let employee1 = new employee(“Siddhi”, 4);
console.log(employee1.empname); // Result – Siddhi
console.log(employee1.empid); // Result – 4
Explanation of this keyword in constructor function (class).
Here inside the constructor function, this keyword indicates the reference to the newly created function object, and then its properties are indicated by referencing.
Binding this keyword in JavaScript function.
Sometimes, we specify in a function program where you may need to bind the value of this keyword. So here programmers can do this by using bind() method.
Binding this of a JavaScript function to a specific object.
let employee = {
empname: “David”,
empinfo() {
console.log(“Hi, employee name is – ” + this.empname);
}
};
let dispFn = employee.empinfo;
let boundinfo = dispFn.bind(employee); // here Binding ‘this’ keyword used to the ’employee’ object
boundinfo(); // Result – Hi, employee name is – David
Explanation of Binding this keyword in JavaScript function.
In this program bind() function method creates a new function by setting this keyword value to employee object. When we call boundinfo() function, this keyword refers to employee object properties.
Binding this keyword in callback function in JavaScript function.
While passing object methods as callback in JavaScript program, this cannot reference the object. Here to set the correct value of this keyword, you can use bind() function method.
Example of binding this in callback function in function.
let employee = {
empname: “Jack”,
empinfo() {
console.log(“Hi, employee name is – ” + this.empname);
}
};
setTimeout(employee.empinfo, 3000); // Result – Hi, employee name is – undefined because ‘this’ is not bound
Explanation of bind this in callback function in function.
Here bind() method determines that this inside empinfo refers to employee object even if this method is used as a callback.
Summary of this keyword in JavaScript function objects.
- Inside object methods – This keyword in a function indicates a reference to the object of which the function is a part.
- Global context – This keyword indicates a reference to the window in the global object browser.
- Regular functions – This keyword depends on how the function is called in the object.
- Arrow functions – In a function program this is literally bound to the surrounding context, not the object.
- Constructor functions/classes – In a function program this keyword indicates a reference to the instance of the object being created.
- Binding this – You can use bind() method to explicitly set the value of this keyword in a function or callback.
