← Previous Next →

Understanding this

The keyword this in JavaScript is a special reference that points to the context in which a function is executed. Understanding what this refers to is crucial for writing predictable and bug-free code.

Illustration of understanding_this
Illustration of understanding_this

💡 Core Concept

this is determined at runtime depending on how a function is called, not where it is defined.

Common Contexts of this

  • Global Context: In the global scope (outside any function), this refers to the global object (window in browsers).
  • Function Context: In a regular function call, this is undefined in strict mode, or the global object otherwise.
  • Object Method: When a function is called as a method of an object, this refers to that object.
  • Constructor Function: When called with new, this refers to the newly created object.
  • Arrow Functions: Arrow functions do NOT have their own this; they inherit this from the surrounding lexical scope.
Summary of this Behavior
Invocation TypeValue of this
Global scopeGlobal object (window in browsers)
Regular function callundefined (strict mode) or global object (non-strict)
Method call (object.function())The object owning the method
Constructor (called with new)Newly created object
Arrow functionLexical this from enclosing scope

Why does this matter?

It enables functions to operate in the context of different objects without rewriting them. However, misunderstanding this leads to bugs when this doesn't point where expected.

📌 Deep Dive: this in Method Calls vs. Regular Functions

JAVASCRIPT
const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};

obj.greet(); // Alice

const greetFunc = obj.greet;
greetFunc(); // undefined (or error in strict mode)
Output
Alice
undefined

⚠️ Common Pitfall

Assigning a method to a variable and calling it loses the original this binding. Use bind() or arrow functions to preserve context.

Using bind(), call(), and apply()

These methods can explicitly set the value of this:

  • bind(): returns a new function permanently bound to a specific this.
  • call() and apply(): immediately invoke the function with a given this.

📌 Deep Dive: Using bind()

JAVASCRIPT
const obj = { name: 'Bob' };
function sayName() {
  console.log(this.name);
}

const boundSayName = sayName.bind(obj);
boundSayName(); // Bob
Output
Bob

💡 Arrow Functions and this

Arrow functions do not have their own this. They inherit it from the surrounding code, which is useful to avoid losing context inside callbacks.

📌 Deep Dive: Arrow Function Inheriting this

JAVASCRIPT
const person = {
  name: 'Eve',
  greet: function() {
    const inner = () => {
      console.log(this.name);
    };
    inner();
  }
};

person.greet(); // Eve
Output
Eve

⚠️ Important

Don't confuse arrow functions with methods if you rely on this. Arrow functions as methods do NOT bind this to the object.

📌 Deep Dive: Arrow Function as Method

JAVASCRIPT
const obj = {
  name: 'Chris',
  greet: () => {
    console.log(this.name);
  }
};

obj.greet(); // undefined (or global object's name)
Output
undefined

Summary

  • this depends on how a function is called, not where it is defined.
  • Method calls bind this to the owning object.
  • Regular functions have this as undefined in strict mode.
  • Arrow functions inherit this lexically from their surrounding scope.
← Previous Next →