Loading Please Wait...
In JavaScript, the this keyword refers to an object.
The this keyword refers to an object. Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used.
this is not a variable. It is a keyword. You cannot change the value of this.
When used in an object method, this refers to the object.
const company = {
fName: "Lynxsia",
lName: "IT Solutions",
id: 5566,
fullName : function() {
return this.fName+ " " + this.lName;
}
};
company.fullName(); // Lynxsia IT Solutions
When used alone, this refers to the global object.
In strict mode, when used alone, this also refers to the global object.
let a = this; // [object Window]
"use strict";
let b = this; // [object Window]
In a function, the global object is the default binding for this.
In a browser window the global object is [object Window].
function myFunction() {
return this;
}
alert(myFunction()); // [object Window]
JavaScript strict mode does not allow default binding.
So, when used in a function, in strict mode, this is undefined.
"use strict";
function myFunction() {
return this;
}
alert(myFunction()); // undefined
In HTML event handlers, this refers to the HTML element that received the event
<button onclick="this.style.display='none'">
Click to Remove Me!
</button>
In below example, this is the person object:
const company = {
fName: "Lynxsia",
lName: "IT Solutions",
id: 5566,
fullName : function() {
return this.fName+ " " + this.lName;
}
};
company.fullName(); // Lynxsia IT Solutions
The call() and apply() methods are predefined JavaScript methods.
They can both be used to call an object method with another object as argument.
The example below calls person1.fullName with person2 as an argument, this refers to person2, even if fullName is a method of person1.
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // "John Doe"
With the bind() method, an object can borrow a method from another object.
This example creates 2 objects (person and member).
The member object borrows the fullname method from the person object.
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
person.fullName.bind(member); // "Hege Nilsen"
To determine which object this refers to; use the following precedence of order.
| Precedence | Description |
|---|---|
| 1 | bind() |
| 2 | apply() and call() |
| 3 | Object method |
| 4 | Global scope |
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved