? JavaScript this Keyword

⚡ Quick Overview

The this keyword in JavaScript refers to the object from which the current function is called. Its value is not fixed; it depends on how and where the function is invoked: global scope, regular functions, object methods, classes, arrow functions, and event handlers.

Understanding this is essential for working with objects, DOM events, and advanced patterns like method chaining and callbacks.

? Key Concepts

• Global context (non-strict mode): this refers to the window object in browsers.
• Regular functions: this depends on how the function is called (default/global, as a method, or using call/apply/bind).
• Object methods: Inside a method, this usually refers to the object that owns the method.
• Arrow functions: Do not have their own this; they inherit it (lexical this) from the surrounding scope.
• Event handlers: In DOM event listeners (with regular functions), this refers to the element that received the event.
• Manual control: You can control this using bind(), call(), or apply().

? Syntax and Theory

There is no special syntax just for this; you simply use it inside functions or methods:

this is resolved using these rules (simplified):

1. If used inside an arrow function → inherit this from the enclosing scope.
2. If called as a method obj.method() → this is obj.
3. If called as a plain function func():
   • Non-strict mode → this is the global object (window in browsers).
   • Strict mode → this is undefined.
4. If used with call/apply/bind → this is whatever you pass explicitly.
5. In event listeners (regular functions) → this is the element that received the event.

? Code Examples

? Global Context

In the global scope (non-strict mode), this refers to the window object.

console.log(this); // window (in browser, non-strict mode)

? Inside Regular Functions

In regular functions, the value of this depends on how the function is called.

function show() {
console.log(this);
}

show(); // window (in non-strict mode), undefined (in strict mode)

? Inside Object Methods

When used in an object method, this usually refers to the object that owns the method.

const person = {
name: "Alice",
greet: function() {
console.log("Hello, " + this.name);
}
};

person.greet(); // Hello, Alice

⚠️ Arrow Functions and this

Arrow functions do not have their own this. They inherit it from the surrounding (lexical) scope. Using them as object methods can lead to unexpected behavior.

const person = {
name: "Bob",
greet: () => {
console.log("Hi, " + this.name);
}
};

person.greet(); // Hi, undefined (this is NOT the person object)

?️ Event Handlers

In DOM event handlers using regular functions, this refers to the element that received the event.

document.querySelector("button").addEventListener("click", function() {
console.log(this); // the button element
});

? Controlling this Manually with bind

You can explicitly set this using bind(), call(), or apply().

function greet() {
console.log("Hello, " + this.name);
}

const user = { name: "Charlie" };

const boundGreet = greet.bind(user);
boundGreet(); // Hello, Charlie

? Live Output and Explanation