Prev Next

JavaScript this Keyword

The this keyword refers to the current execution context. Its value depends on how and where a function is called, and can represent an object, a global object, or be undefined in strict mode.

Key Topics

this in Global Context

In non-strict mode, this in global functions refers to the global object (window in browsers). In strict mode, it can be undefined.

this in Object Methods

In an object's method, this refers to the object itself.

let obj = {
    name: "Alice",
    showName: function() {
        console.log(this.name);
    }
};
obj.showName(); // "Alice"

this in Event Handlers

In a DOM event handler, this typically refers to the element receiving the event.

this in Arrow Functions

Arrow functions don't bind their own this; they inherit it from the parent scope.

JavaScript Usage in DOM

Use this to access DOM elements or their data within event handlers or object methods related to UI components.

<!DOCTYPE html>
<html>
<head><title>this in DOM</title></head>
<body>
    <h1>this Keyword Demo</h1>
    <button onclick="changeText(this)">Click Me</button>

    <script>
        function changeText(el) {
            el.textContent = "Clicked";
        }
    </script>
</body>
</html>

Key Takeaways

  • Dynamic Context: this depends on the call site.
  • Object Methods: this refers to the owning object.
  • Arrow Functions: Inherit this from parent scope.
  • DOM Integration: In event handlers, this is the element triggered.
Prev Next