this Keyword

This lesson explains this Keyword in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript this Keyword Overview

The JavaScript this keyword refers to the object that is currently executing a function. Its value depends on how a function is called, not where the function is written. Understanding this is important for working with objects, classes, event handlers, constructor functions, callbacks, and modern JavaScript applications.

In JavaScript, this can refer to different values depending on the context, such as the global object, an object method, a class instance, an event target, or a value explicitly set using call(), apply(), or bind(). Arrow functions behave differently because they do not create their own this.

Context	What this Refers To	Common Usage
Global Scope	Global object or undefined in strict mode.	Browser and script-level code.
Object Method	The object that owns the method.	User objects and service objects.
Class Method	The class instance.	Models, components, and services.
Event Handler	The element that triggered the event.	Buttons, inputs, forms.
Arrow Function	Inherited from surrounding lexical scope.	Callbacks and nested functions.
call, apply, bind	Explicitly assigned object.	Function borrowing and binding.

JavaScript this Keyword Example

const user = {
  name: "John",
  role: "Developer",
  getProfile: function() {
    return this.name + " is a " + this.role;
  }
};

console.log(user.getProfile());

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  getDetails() {
    return this.name + " costs $" + this.price;
  }
}

const product = new Product("Laptop", 1200);

console.log(product.getDetails());

In this example, this refers to the user object inside the object method and the class instance inside the Product class.

Top 10 JavaScript this Keyword Examples

The following examples show how this behaves in common JavaScript situations, including objects, classes, events, constructors, arrow functions, and explicit binding.

#	Example	Syntax
1	Object Method	`const user = { name: "John", getName() { return this.name; } };`
2	Class Constructor	`class User { constructor(name) { this.name = name; } }`
3	Class Method	`class User { getName() { return this.name; } }`
4	Event Handler	`button.addEventListener("click", function() { console.log(this); });`
5	Arrow Function this	`const arrow = () => this;`
6	Constructor Function	`function User(name) { this.name = name; }`
7	call Method	`getName.call(user);`
8	apply Method	`getName.apply(user);`
9	bind Method	`const bound = getName.bind(user);`
10	Nested Function Issue	`function outer() { const inner = () => this; }`

Popular Real-World JavaScript this Examples

These real-world examples show where the this keyword appears in practical JavaScript code, including UI components, services, models, event handlers, and object-oriented programming.

Scenario	this Pattern
User Object Method	`user.getProfile = function() { return this.name; }`
Product Class	`class Product { constructor(price) { this.price = price; } }`
Shopping Cart Method	`cart.getTotal = function() { return this.items.length; }`
Button Click Handler	`button.addEventListener("click", function() { this.disabled = true; });`
Form Method	`form.addEventListener("submit", function() { console.log(this.id); });`
Class Service	`class ApiService { constructor(url) { this.url = url; } }`
Bind Callback	`const handler = this.handleClick.bind(this);`
Arrow Callback	`setTimeout(() => { console.log(this.name); }, 1000);`
Function Borrowing	`getProfile.call(adminUser);`
Reusable Validator	`validator.check.call(formData);`

Best Practices

Use regular functions for object methods when you need this.
Use arrow functions when you want to keep this from the surrounding scope.
Avoid using arrow functions as object methods when accessing object properties with this.
Use bind() when passing methods as callbacks and you need to preserve this.
Use classes when working with reusable objects that depend on instance data.
Keep method names clear so the role of this is easier to understand.
Avoid relying on global this in modern JavaScript.
Use strict mode or modules to reduce unexpected global this behavior.

Common Mistakes

Thinking this depends on where a function is written instead of how it is called.
Using an arrow function as an object method and expecting object this.
Losing this when passing a method as a callback.
Forgetting to use new with constructor functions.
Using this in global scope and expecting consistent behavior everywhere.
Confusing event this with event.target.
Not using bind(), arrow functions, or closures when preserving context is required.

Key Takeaways

this refers to the object currently executing a function.
The value of this depends on how a function is called.
In object methods, this usually refers to the object.
In class methods, this refers to the class instance.
Arrow functions do not create their own this.
call(), apply(), and bind() can control this.

Pro Tip

Remember this simple rule: this is decided by how a function is called. Use regular functions for object methods and arrow functions when you want to preserve the surrounding this.

You now understand the JavaScript this keyword, including object methods, class instances, event handlers, arrow functions, constructor functions, call(), apply(), bind(), best practices, and common mistakes. Continue to the next lesson to learn JavaScript Error Handling.