The 'this' Keyword & Binding

Demystify JavaScript's most confusing keyword. Learn the rules that determine what 'this' points to at runtime.

JavaScript8 min readConcept 15 of 62

What is 'this'?

In many programming languages, this always points to the class or object where the method is written.

In JavaScript, this is determined by *how* a function is called, not *where* it is written. The same function can have a different this depending on the call site.

The Four Rules of Binding

1. **Implicit Binding**: If a function is called as a method on an object (user.greet()), this points to that object (user).

2. **Explicit Binding**: Using .call(), .apply(), or .bind(), you can forcefully dictate what this should be.

3. **New Binding**: Calling a function with the new keyword (new User()) sets this to a brand new empty object.

4. **Default Binding**: A plain standalone function call (greet()) sets this to the global object (window in browsers) or undefined in strict mode.

Arrow Functions break the rules

Arrow functions (() => {}) do not have their own this context. Instead, they use 'lexical binding'.

This means they inherit this from the parent scope at the exact moment they are defined, and you cannot change it later-even with .call() or .bind().

The Target Tracker

Toggle between different function invocation styles (Standalone, Method, Explicit, and Arrow) to see exactly what object the this keyword snaps to.

The Target Tracker

// 1. Setup the object
const user = {
name: "Alice",
greet: function() {
console.log(this.name);
}
};
// 2. Call the function
user
.greet();
Execution Context
this
user
Output
"Alice"
iNotice the dot: user.greet(). The object to the left of the dot becomes this.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1In the call `player.jump()`, what will `this` point to inside the `jump` function?
  2. 2How does an Arrow Function determine its `this` value?
  3. 3What happens if you run `const fn = user.greet; fn();` in strict mode?

Remember this

  • For standard functions, this is determined by HOW the function is called, not where it is written.
  • Look to the left of the dot at call time: obj.method() binds this to obj.
  • Standalone calls (fn()) bind this to the global object (or undefined in strict mode).
  • Arrow functions ignore all rules and inherit this lexically from their surrounding scope.

Done with this concept?

Mark it complete to track your progress. No login needed.