Explain JavaScript "this" keyword?

Javascript Web Development Object Oriented Programming

The JavaScript this keyword references the object to which it belongs. It can refer to the global object if alone or inside a function. It refers to the owner object if inside a method and refers to the HTML element that received the event in an event listener.

Example

Following is the code for the JavaScript this Identifier −

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JavaScript this Identifier</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see which object 'this' refers to in multiple
context
</h3>
<script>
   let thisRef = this;
   let sampleEle = document.querySelector(".sample");
   function test() {
      return this;
   }
   let testObj = {
      a: 22,
      check() {
         return this;
      },
   };
   document.querySelector(".Btn").addEventListener(
      "click",
      () => {
         sampleEle.innerHTML = "This inside normal function = " + test() + "<br>";
         sampleEle.innerHTML += "This inside a method = " + testObj.check() + "<br>";
         sampleEle.innerHTML += "This without any scope = " + thisRef + "<br>";
      },
      false
   );
</script>
</body>
</html>