The JavaScript this keyword refers to an object. In other words, the this references the object that is currently calling the function.
Suppose you have an object called counter that has a method next(). When you call the next() method, you can access the this object.
let counter = {
count: 0,
next: function () {
return ++this.count;
},
};
counter.next();Code language: JavaScript (javascript)Inside the next() function, the this references the counter object. See the following method call:
counter.next();This keyword in JavaScript
Simple example code.
<!DOCTYPE html>
<html>
<body>
<script>
const person = {
firstName: "This",
lastName : "Keyword",
id : 101,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName());
</script>
</body>
</html> Output:
Method Invocation
When used in an object method, this refers to the object. Here is this refers to the person object.
fullName : function() {
return this.firstName + " " + this.lastName;
}Global context
In the global context, the this references the global object, which is the window object on the web browser or global object on Node.js.
This behavior is consistent in both strict and non-strict modes. Here’s the output on the web browser:
console.log(this === window); // trueThe call() and apply() method
The call() and apply() method allows us to write a method that can be used on different objects.
<script>
var emp_address = {
fullAddress: function() {
return this.company + " " + this.city+" "+this.state;
}
}
var address = {
company:"Javatpoint",
city:"Noida",
state:"UP",
}
document.writeln(emp_address.fullAddress.call(address));
document.writeln(emp_address.fullAddress.apply(address));
</script> The bind() Method
The bind() method was introduced in ECMAScript 5. It creates a new function whose this keyword refers to the provided value, with a given sequence of arguments.
<script>
var lang="Java";
function lang_name(call)
{
call();
};
var obj={
lang:"JavaScript",
language:function()
{
document.writeln(this.lang+ " is a popular programming language.");
}
};
lang_name(obj.language);
lang_name(obj.language.bind(obj));
</script> The value of “this” is determined by how a function is called, and it can have different meanings depending on the context:
- Global Context: In the global context (outside of any function), “this” refers to the global object, which is usually the
windowobject in web browsers or the global object in Node.js. - Function Context: Inside a regular function, the value of “this” depends on how the function is called. If the function is called as a standalone function, “this” will again refer to the global object. However, if the function is called as a method of an object, “this” will refer to the object itself.
- Method Context: When a function is called as a method of an object, “this” refers to the object that the method is called on. In this case, “this” allows you to access and manipulate the properties and methods of the object.
- Constructor Context: When a function is used as a constructor function using the
newkeyword, “this” refers to the newly created object instance. Constructors are used to create new objects with shared properties and methods. - Event Handler Context: In event handlers, such as those used with HTML elements, “this” refers to the DOM element that triggered the event.
- Arrow Functions: Arrow functions have a different behavior regarding “this.” They do not have their own “this” context; instead, they inherit the value of “this” from the surrounding code.
Comment if you have any doubts or suggestions on this JS keyword topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version