What Is Dev

this in JavaScript

At its heart, this is a reference to the execution context of the current function. Every time a function runs, JavaScript creates a new execution context, which includes:

The this binding.
Variables (via the scope chain).
Arguments.

The value of this isn't fixed when you write the code—it's set when the function is invoked. This is called "dynamic binding" or "late binding." Contrast this with lexical scoping for variables, which is determined at authoring time.

JavaScript has four main ways this gets bound (the "invocation patterns"):

Default binding (global or undefined).
Implicit binding (via object methods).
Explicit binding (using call, apply, or bind).
New binding (with constructors).

Arrow functions are a special case—they don't have their own this and inherit it lexically.

Default Binding: Standalone Functions

When a function is called without any context (e.g., not as a method), this defaults to the global object in non-strict mode. In browsers, that's window; in Node.js, it's global. In strict mode ('use strict';), it's undefined to prevent accidental global pollution.

function greet() {
  console.log(this);  // In browser: Window object; in Node: global
  console.log('Hello from', this.name);
}

greet();  // Logs: Window/global object, then 'Hello from Global'

In strict mode:

'use strict';
function greet() {
  console.log(this);  // undefined
}
greet();  // TypeError if you try this.name

Implicit Binding: Object Methods

When a function is called as a method of an object (using dot notation or bracket notation), this implicitly points to the object "owning" the method.

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, I am', this.name);
  }
};

person.greet();  // 'Hello, I am Alice' — this === person

But here's a gotcha: If you extract the method and call it separately, it loses the implicit binding and falls back to default.

const greetFn = person.greet;
greetFn();  // 'Hello, I am undefined' (or global.name in non-strict)

This happens a lot with callbacks, like in event listeners or array methods (e.g., forEach). Solution? Use arrow functions or explicit binding (more below).

Explicit Binding: call, apply, bind

These methods let you force this to a specific value, overriding implicit or default binding.

call(thisArg, arg1, arg2, ...): Invokes immediately, passing args individually.
apply(thisArg, [args]): Invokes immediately, passing args as an array.
bind(thisArg, arg1, ...): Returns a new function with this permanently bound (currying args optional).

Pro tip: bind is immutable—calling bind again on a bound function doesn't change this. Useful for partial application in functional programming.

New Binding: Constructors

When a function is called with new, this refers to the newly created object instance.

function Person(name) {
  this.name = name;  // this === new instance
  this.greet = function() { console.log('Hi, I am', this.name); };
}

const alice = new Person('Alice');
alice.greet();  // 'Hi, I am Alice'

Arrow Functions: Lexical this

Arrow functions (() => {}) don't have their own this—they capture this from the enclosing scope (lexical binding, the this where the arrow was defined). This solves many callback issues.

const person = {
  name: 'Charlie',
  friends: ['Dave', 'Eve'],
  listFriends: function() {
    this.friends.forEach(function(friend) {
      console.log(this.name, 'knows', friend);  // this === global/undefined → bug!
    });
  }
};
person.listFriends();  // Wrong output

// Fixed with arrow:
listFriends: function() {
  this.friends.forEach((friend) => {
    console.log(this.name, 'knows', friend);  // this === person
  });
}

Arrows are great in classes too:

class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => { this.seconds++; }, 1000);  // this === instance
  }
}

Edge Cases and Pitfalls

Event handlers: In DOM events, this is the element: <button onclick="console.log(this)"> logs the button. But in React's onClick, it's managed differently.
Strict mode quirks: Always use it to avoid global leaks.
Nested functions: Inner functions lose outer this unless captured (e.g., const self = this; pre-ES6).
Prototypes and inheritance: In methods on prototype, this still points to the instance.
Getters/Setters: this is the object: { get fullName() { return this.first + ' ' + this.last; } }.
Async contexts: In promises or async/await, this behaves normally, but callbacks might lose it.
Modules: In ESM, top-level this is undefined.

Common bug: Losing this in timers or callbacks. Fix with bind or arrows.

Best Practices from Experience

Prefer arrows for callbacks: Avoids binding headaches.
Use classes for OOP: They enforce new and work well with super.
Explicit over implicit: If in doubt, use bind or pass context as args.
Avoid global this: Stick to modules and strict mode.
Debugging tip: Log this or use breakpoints in dev tools to inspect.
In large apps: Tools like TypeScript add this types for safety.
Performance: bind creates new functions—cache them if in loops.

JavaScript resolves this using this strict priority (highest to lowest):

new binding (constructor call with new) → this = new object
Explicit binding (.call, .apply, .bind) → whatever you passed
Implicit binding (obj.method()) → the object before the dot
Default binding (standalone call) → global object or undefined (strict)
Arrow functions ignore all above — use lexical this from surrounding scope

Arrow functions are special: they skip their own binding and just use whatever this was in the outer scope.

The Normal this Binding Priority (for regular functions)

When JavaScript decides this for a regular function, it checks in this strict order (highest priority first):

new binding → this = new object
Explicit binding → .call(), .apply(), .bind() → whatever you passed
Implicit binding → obj.method() → the object before the dot
Default binding → global object or undefined (strict mode)

Where Arrow Functions Fit In

Arrow functions opt out of this entire system.

They have no own this binding at all.
They ignorenew, call, apply, and bind when it comes to this.
Instead, they capture this from the surrounding lexical scope (i.e., whatever this was in the outer function/object where the arrow was defined).