JavaScript this / call / apply / bind cheat sheet

js-this-cheat-sheet.md

JavaScript this, call, apply, bind Cheat Sheet

Quick revision notes with examples and common interview pitfalls.

---

1. Regular Function Call

function show() {
  console.log(this);
}

show();

Explanation

For a regular function call, this depends on how the function is invoked.

In strict mode:

"use strict";
show(); // undefined

Without strict mode in the browser, it is usually:

window

Rule

If the function is called like this:

show()

then this is global object or undefined, not the nearest function scope.

---

2. Object Method

const user = {
  name: "Zoltan",
  show() {
    console.log(this.name);
  }
};

user.show();

Output

Zoltan

Explanation

Here the function is called as:

user.show()

So:

this === user

Memory rule

this = the object on the left side of the dot at call time

---

3. Lost Reference

const user2 = {
  name: "Zoltan",
  show() {
    console.log(this.name);
  }
};

const fn = user2.show;
fn();

Output

undefined

Explanation

This is no longer called as:

user2.show()

Now it is:

fn()

So it becomes a normal function call.

This is one of the most common interview questions.

---

4. Arrow Function

const user3 = {
  name: "Zoltan",
  show: () => {
    console.log(this);
  }
};

user3.show();

Explanation

Arrow functions do not have their own this.

They inherit this from the outer lexical scope.

That means:

this !== user3

This is why arrow functions are usually not recommended as object methods.

---

5. call()

Calls the function immediately and sets this manually.

function show(age, role) {
  console.log(this.name, age, role);
}

const user = {
  name: "Zoltan"
};

show.call(user, 50, "Frontend Engineer");

Output

Zoltan 50 Frontend Engineer

Syntax

fn.call(thisArg, arg1, arg2)

Explanation

call() lets you explicitly define what this should be.

---

6. apply()

Same as call(), but arguments are passed as an array.

function show(age, role) {
  console.log(this.name, age, role);
}

const user = {
  name: "Zoltan"
};

show.apply(user, [50, "Frontend Engineer"]);

Output

Zoltan 50 Frontend Engineer

Syntax

fn.apply(thisArg, [args])

Explanation

The only difference is argument format.

call

show.call(user, 50, "FE")

apply

show.apply(user, [50, "FE"])

---

7. bind()

Returns a new function with permanently fixed this.

function show() {
  console.log(this.name);
}

const user = {
  name: "Zoltan"
};

const boundFn = show.bind(user);

boundFn();

Output

Zoltan

Explanation

Unlike call() and apply(), bind() does not execute immediately.

It returns a new function.

Syntax

const newFn = fn.bind(thisArg)

---

8. Fixing Lost Reference with bind()

const user = {
  name: "Zoltan",
  show() {
    console.log(this.name);
  }
};

const fn = user.show.bind(user);
fn();

Output

Zoltan

Common interview example.

---

9. Callback Example

const user = {
  name: "Zoltan",
  show() {
    console.log(this.name);
  }
};

setTimeout(user.show.bind(user), 1000);

Explanation

Without bind(), this would be lost inside the callback.

---

Quick Memory Rules

this

• obj.fn() → this = obj
• fn() → this = undefined / window
• () => {} → outer this

call

call now

Runs immediately.

apply

apply array

Arguments come as array.

bind

bind later

Returns new function.

---