DEV Community

Jyoti chaudhary
Jyoti chaudhary

Posted on

Implicit and Explicit Binding in JS

In JavaScript, the concepts of implicit binding and explicit binding are related to how the this keyword behaves in different contexts. Understanding these two is crucial for mastering how function contexts work in JavaScript. Let's break down both types and provide examples to clarify how they function.

Implicit Binding

Implicit binding occurs when this refers to an object that is calling the function. This usually happens in methods (functions that are properties of objects). In this dot notation is used to invoke the function.

How it works:

  • Implicit binding happens when a method (a function defined as an object property) is called in the context of the object.
  • The value of this is implicitly bound to the object that calls the method.

Ex: 1

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

person.greet();   // Output: Hello, my name is Sumit
Enter fullscreen mode Exit fullscreen mode

When person.greet() is called, this inside greet implicitly refers to the person object because person is the object that called the function.

Ex:2

var movies= {
      genre: "Action",
      movieGenre: function() {
           console.log(this.genre)
             },
             nestedMovies: {
                  genre: "Romantic",
                  movieGenre: function() {
                  console.log(this.genre)
             }
         }
       }
movies.nestedMovies.movieGenre();  // Output: Romantic
movies.movieGenre();  // Output: Action
Enter fullscreen mode Exit fullscreen mode

Explicit Binding

Explicit Binding occurs when you explicitly tell JavaScript what this should refer to by using functions like call, apply, or bind.

Example of Explicit Binding with call():

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

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

greet.call(person1);   // Output: Hello, my name is Alice
greet.call(person2);   // Output: Hello, my name is Bob
Enter fullscreen mode Exit fullscreen mode

The call() method is used to invoke a function immediately with this set to the provided object and individual arguments passed one by one.

Example of Explicit Binding with bind():

const person = {
  name: "John",
  greet: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};
const greetJohn = person.greet.bind(person, "Hello");
greetJohn();   // Output: Hello, my name is John
Enter fullscreen mode Exit fullscreen mode

The bind() method doesn't immediately invoke the function; instead, it returns a new function with this bound to the specified object.

Example of Explicit Binding with apply():

const person = {
  name: "Bob"
};

function introduce(age, occupation) {
  console.log("My name is " + this.name + ", I am " + age + " years old and I am a " + occupation);
}

introduce.apply(person, [30, "developer"]);
// Output: My name is Bob, I am 30 years old and I am a developer
Enter fullscreen mode Exit fullscreen mode

The apply() method invokes a function immediately, with this set to the provided object, and the arguments passed in as an array.

apply(): Similar to call(), but it takes arguments as an array (instead of separate arguments).

Summary:

Implicit Binding: Happens automatically when a function is invoked as a method of an object. this refers to the object calling the method.
Explicit Binding: Occurs when you manually set the value of this using methods like call(), apply(), or bind(). This allows you to control which object this refers to.

These concepts are crucial when you're dealing with function contexts in JavaScript, especially when passing around functions or working with event handlers and callbacks.

Top comments (0)