The JavaScript this Keyword
What is this?
In JavaScript, when we use the this keyword, it points to an object.
The object that is influenced by howthis is employed or called depends on the context of its invocation.
The termthis in programming points to various objects based on its usage.
In a method related to an object, the term this points to the specific object. |
By itself, the term this points to the overall object, often known as the global object. |
In a function, the term this points to the main object. |
In a function under strict mode, the value of this becomes undefined. |
At an occasion, the term this signifies the element that encountered the event. |
The functions call(), apply(), and bind() can change the reference of this to different objects. |
Note
this isn't like a variable; it's a keyword. You can't modify the value of this.
this in a Method
When employed in a method of an object, the term this points to the specific object.
On the example at the top of this page, when you see this, it is pointing to the person object.
The fullName method belongs to the person object.
this Alone
When used by itself, the term this points to the overarching or main object known as the global object.
Since this operates in the overall scope.
In a web browser, the global object is represented as [object Window] in the browser window:
In strict mode, when used alone, this also refers to the global object:
this in a Function (Default)
In a function, the main object that is automatically linked to the keyword this is called the global object.
In a web browser, the global object appears as [object Window].
this in a Function (Strict)
In JavaScript, when you use strict mode, it doesn't permit default binding.
When utilized within a function under strict mode, the value of this becomes undefined.
this in Event Handlers
In HTML event handlers, the term "this" points to the HTML element that got the event.
Object Method Binding
In these instances, the this represents the person object:
In simpler terms, this.firstName refers to the firstName attribute of the this object, specifically the person object.
Explicit Function Binding
The JavaScript methods call() and apply() are already built-in functions.
Both can be used to invoke a method of an object by providing another object as an argument.
The provided example demonstrates calling the fullName method of person1 with person2 as an argument. In this context, when this is used, it points to person2, even though fullName is originally a method of person1.
Function Borrowing
The bind() method allows an object to use a method from another object.
This illustration generates two items, namely a person and a member.
The member object uses the fullname method from the person object.
This Precedence
To find out what object is referred to by this, follow this order of precedence.
|
| Precedence | Object |
| 1 | bind() |
| 2 | apply() and call() |
| 3 | Object method |
| 4 | Global scope |
Is this inside a function that's being called with bind()?
Does this get invoked within a function using apply()?
Does this get executed within a function when using call()?
Is this part of an object's method?
Is this within a function in the global scope?
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object. </p>
<p>Because <b>fullName</b> is a method of the person object. </p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object. </p>
<p>Because <b>fullName</b> is a method of the person object. </p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this example, <b>this</b> refers to the window object: </p>
<p id="demo"></p>
<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this example, <b>this</b> refers to the window object: </p>
<p id="demo"></p>
<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this example, <b>this</b> refers to the the window object: </p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In a function, normally, 'this' refers to the overall object.</p>
<p>But in strict mode, the default binding is not allowed. So, 'this' is:</p>
<p id="demo"></p>
<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<button onclick="this.style.display='none'">Click to Remove Me!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this example, <b>this</b> refers to the <b>person object</b>. </p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
myFunction: function() {
return this;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this case, <b>this</b> refers to the <b>individual</b> object. </p>
<p>Since <b>fullName</b> belongs to the individual object. </p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword </h1>
<p>In this instance, "this" means person2, even when it's a function of person1:</p>
<p id="demo"></p>
<script>
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName: "John",
lastName: "Doe",
}
let x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p>
<p id="demo"></p>
<script>
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName: "Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
document.getElementById("demo").innerHTML = fullName();
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery