JavaScript: this

Higher priority wins. Arrow functions ignore all other rules.

this = ?
│
├─ Arrow function?
│  └─ Yes → enclosing scope's this
│
├─ Called with new?
│  └─ Yes → the new object
│
├─ Called with call/apply/bind?
│  └─ Yes → the specified thisArg
│
├─ Called as obj.fn()?
│  └─ Yes → obj
│
└─ Plain fn() call
   ├─ Strict mode → undefined
   └─ Sloppy mode → globalThis

globalThis === window; // Browser
globalThis === global; // Node.js
globalThis === self; // Web Worker

Universal reference to the global object. Works in all environments (ES2020).

// Browser <script>
console.log(this === window); // true

// Browser <script type="module">
console.log(this); // undefined

// Node.js CommonJS top-level
console.log(this === module.exports); // true

// Node.js ESM
console.log(this); // undefined

Module contexts always have this === undefined.

function fn() {
  return this;
}
fn(); // globalThis (window in browser)

Without an explicit binding, this defaults to the global object.

"use strict";
function fn() {
  return this;
}
fn(); // undefined

Strict mode prevents accidental global access. ES modules are always strict.

const obj = {
  name: "obj",
  getName() {
    return this.name;
  },
};
obj.getName(); // "obj" — this = object before the dot

this is determined by the call site, not where the function is defined.

const proto = {
  greet() {
    return this.name;
  },
};
const child = Object.create(proto);
child.name = "child";
child.greet(); // "child" — this = child, not proto

this always refers to the object the method was called on, even if the method lives on the prototype.

function Person(name) {
  this.name = name; // this = new object
}
const p = new Person("Alice");
p.name; // "Alice"

new creates a fresh object and binds this to it.

function Foo() {
  this.a = 1;
  return { a: 99 }; // overrides this
}
new Foo().a; // 99

function Bar() {
  this.a = 1;
  return 42; // ignored (primitive)
}
new Bar().a; // 1

Returning an object from a constructor replaces this. Returning a primitive is ignored.

const obj = {
  name: "outer",
  getNameDelayed() {
    setTimeout(() => {
      console.log(this.name); // "outer"
    }, 100);
  },
};

Arrow functions have no own this — they inherit from the enclosing lexical scope at definition time.

const arrow = () => this;

arrow.call({ a: 1 }); // outer this (NOT {a:1})
arrow.apply({ a: 1 }); // outer this
arrow.bind({ a: 1 })(); // outer this

You cannot rebind an arrow function's this. call, apply, and bind are all silently ignored.

function greet(greeting) {
  return `${greeting}, ${this.name}`;
}
greet.call({ name: "Alice" }, "Hi");
// "Hi, Alice"

Calls immediately. Pass args individually.

function greet(greeting, punct) {
  return `${greeting}, ${this.name}${punct}`;
}
greet.apply({ name: "Bob" }, ["Hey", "!"]);
// "Hey, Bob!"

Calls immediately. Pass args as array.

function greet(greeting) {
  return `${greeting}, ${this.name}`;
}
const greetAlice = greet.bind({ name: "Alice" });
greetAlice("Hello"); // "Hello, Alice"

Returns a new function with this permanently bound. Binding only works once — re-binding a bound function is ignored.

class Dog {
  constructor(name) {
    this.name = name; // this = new instance
  }
}
new Dog("Rex").name; // "Rex"

Must call super() before using this in derived classes.

class Dog {
  constructor(name) {
    this.name = name;
  }
  bark() {
    return `${this.name} says woof`;
  }
  static create(name) {
    return new this(name); // this = Dog class
  }
}

Instance methods: this = instance. Static methods: this = the class itself.

class Button {
  constructor(label) {
    this.label = label;
  }
  // Arrow = permanently bound to instance
  handleClick = () => {
    console.log(this.label);
  };
}
const btn = new Button("OK");
const fn = btn.handleClick;
fn(); // "OK" — still works!

Arrow class fields solve the "lost this" problem in callbacks and event handlers.

button.addEventListener("click", function (e) {
  console.log(this === button); // true
  console.log(this === e.currentTarget); // true
});

In a regular function handler, this is the element the listener is attached to (e.currentTarget).

button.addEventListener("click", (e) => {
  console.log(this); // enclosing scope (NOT button!)
  // Use e.currentTarget instead
  console.log(e.currentTarget === button); // true
});

Arrow functions do not receive the element as this. Use e.currentTarget to access the element.

const obj = {
  name: "obj",
  getName() {
    return this.name;
  },
};

// Extracting method
const fn = obj.getName;
fn(); // undefined — lost this!

// Destructuring
const { getName } = obj;
getName(); // undefined — lost this!

// Callback
["a"].forEach(obj.getName); // undefined

Assigning a method to a variable or passing it as a callback detaches it from its object.

// Fix 1: Arrow function
["a"].forEach(() => obj.getName());

// Fix 2: bind
["a"].forEach(obj.getName.bind(obj));

// Fix 3: Arrow class field
class Obj {
  name = "obj";
  getName = () => this.name; // always bound
}

setTimeout and setInterval also lose this — use the same fixes.