AI Navigate

Understanding this, call(), apply(), and bind() in JavaScript

Dev.to / 3/15/2026

💬 OpinionTools & Practical Usage

Key Points

  • The article explains that this in JavaScript refers to the object that calls the function.
  • It emphasizes that the value of this depends on how a function is invoked, i.e., who is calling it.
  • It provides an example with a person object and a greet method to show this.name being accessed via this.
  • It notes that in a normal standalone function this usually points to the global object, or undefined when strict mode is in effect.
  • It explains that when a function is called as a method of an object, this refers to that object, illustrating how this changes with invocation context.

In JavaScript, the keyword this is used inside functions to refer to the object that is calling the function.

A simple way to think about it is:

this means “who is calling the function.”

Understanding this helps when working with objects, methods, and advanced function behaviors.

What this Means in JavaScript

The value of this depends on how a function is called.

Example:

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();

Output:

Hello, my name is Alice

Here:

  • this refers to the person object
  • this.name accesses the object's property

this Inside Normal Functions

In a normal standalone function, this usually refers to the global object (or undefined in strict mode).

Example:

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

showThis();

Since the function is not called by any object, this does not refer to a specific object.

this Inside Objects

When a function is called as a method of an object, this refers to that object.

Example:

let car = {
  brand: "Toyota",
  showBrand: function() {
    console.log(this.brand);
  }
};

car.showBrand();

Output:

Toyota

Here:

  • this refers to the car object
  • this.brand accesses its property

What call() Does

The call() method allows us to call a function and specify what this should refer to.

Example:

let person1 = {
  name: "Alice"
};

let person2 = {
  name: "Bob"
};

function greet() {
  console.log("Hello " + this.name);
}

greet.call(person1);
greet.call(person2);

Output:

Hello Alice
Hello Bob

Here, call() lets us borrow a function and run it with a different object.

What apply() Does

apply() works almost the same as call().

The difference is how arguments are passed.

  • call() passes arguments individually
  • apply() passes arguments as an array

Example:

function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

let person = {
  name: "Alice"
};

introduce.apply(person, ["Paris", "France"]);

Output:

Alice lives in Paris, France

What bind() Does

bind() does not immediately call the function.

Instead, it creates a new function with this permanently set.

Example:

let person = {
  name: "Alice"
};

function greet() {
  console.log("Hello " + this.name);
}

let greetAlice = greet.bind(person);

greetAlice();

Output:

Hello Alice

Here:

  • bind() creates a new function
  • this will always refer to person

Difference Between call(), apply(), and bind()

Method Executes Immediately Arguments Result
call() Yes Passed individually Calls function with specified this
apply() Yes Passed as array Calls function with specified this
bind() No Passed individually Returns a new function

Example comparison:

function greet(city) {
  console.log(this.name + " from " + city);
}

let person = { name: "Alice" };

greet.call(person, "London");
greet.apply(person, ["London"]);

let greetBound = greet.bind(person);
greetBound("London");

Assignment

Questions

  1. Create an object with a method that uses this.

  2. Borrow that method using call().

  3. Use apply() with array arguments.

  4. Use bind() and store the function in a variable.

Answers

1. Create an Object with a Method

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();

2. Borrow the Method Using call()

let person2 = {
  name: "Bob"
};

person.greet.call(person2);

Output:

Hello, my name is Bob

3. Use apply() with Array Arguments

function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

let person = {
  name: "Alice"
};

introduce.apply(person, ["Paris", "France"]);

4. Use bind() and Store the Function

function greet() {
  console.log("Hello " + this.name);
}

let person = {
  name: "Alice"
};

let boundGreet = greet.bind(person);

boundGreet();

Output:

Hello Alice

Conclusion

The keyword this helps functions access the object that is calling them. Methods like call(), apply(), and bind() allow us to control what this refers to.

Understanding these concepts makes it easier to reuse functions, borrow methods between objects, and manage function behavior in JavaScript.