The `this` Keyword

What is this?

this is a special keyword that refers to the object that is currently executing the function. Its value depends on how and where the function is called, not where it's defined.

Rules for this

• Global context: this refers to the global object (window in browsers)
• Object method: this refers to the object the method was called on
• Arrow functions: this is inherited from the surrounding scope
• Event handlers: this refers to the element

Examples

// Global context
console.log(this); // window (in browser)

// Object method
let person = {
  name: "Alice",
  greet: function() {
    console.log(this.name);
  }
};
person.greet(); // "Alice"

// Arrow function (inherits parent's this)
let obj = {
  name: "Bob",
  greet: () => {
    console.log(this.name); // this is from outer scope
  }
};

Common Mistakes

• Assuming this in arrow functions works like regular functions
• Losing this when passing methods as callbacks
• Using this in global scope expecting it to be something else

Quick Quiz

Summary

• this depends on how the function is called
• In object methods, this refers to the object
• Arrow functions inherit this from the surrounding scope
• Use call() and apply() to explicitly set this
• Be careful with this in callbacks