Default vs Implicit vs Explicit Binding

The term Binding generally refers to an action or something that ties together, attaches or holds down. In JavaScript we have few types of binding such as Default Binding , Implicit Binding and Explicit Binding.

In JS, we use this keyword for binding the methods and it refers to the object that the functions belongs to.

1. Default Binding

In Default Binding, this refers to the window object which is our global object in this case.

function defaultBinding(){
      console.log(this)
}
// Output : window

Whenever this is called in the only function we declare , it always calls to the window object in normal mode and undefined in the strict mode.

'use strict'
function defaultBinding(){
      console.log(this)
}
// Output : undefined

2. Implicit Binding

Implicit binding occurs whenever you call a function using an object and a dot .notation. Suppose that we have a book as an object and a method named as printTitle i.e., book.printTitle(), then this keyword will always point to the object which is just before the . operator of the function invoked or the object which is on the left side of the .dot.

Ex : 1
var books = {
      title : "First Book",
      printTitle : function() {
           console.log(this.title)
             }
       }
books.printTitle()
// Output : First Book 

//Nested Function Example
Ex:2
var books = {
      title : "First Book",
      printTitle : function() {
           console.log(this.title)
             },
             nestedBooks : {
                  title : "Second Book",
                  printTitle : function() {
                  console.log(this.title)
             }
         }
       }
books.nestedBooks.printTitle()
//Output : Second Book

//Method Seperation Example
Ex:3
var books = {
      title : "First Book",
      printTitle : function() {
           console.log(this.title)
             },
             nestedBooks : {
                  title : "Second Book",
                  printTitle : function() {
                  console.log(this.title)
             }
         }
       }

var otherBooks = {
      title : "Third Book"
}
otherBooks.printTitle = books.printTitle;
otherBooks.printTitle()
//Output : Third Book

In Ex:1 before the . we have object book and this is referring to this book object.

In Ex:2 before the . we have object nestedBooks and this is referring to the object which is just before the . and that's why Second Book is coming as an output.

In Ex:3 just before function invokation we have otherBooks object which refers to Third book. When we copy an object method to a new variable, we are simply creating a reference to that function.

3. Explicit Binding

We achieve explicit binding by applying in-built functions like call(), apply() and bind()

The call() method calls a function with a given this value and arguments provided individually.

const name = {
        firstName : "Vikrant",
        lastName : "Singh",
        printFullName : function() {
                    console.log(this.firstName + " " + this.lastName)
                            }
                }
name.printFullName.call()

We generally don't use functions inside an object. So taking it outside

let printFullName = function(city, state) {
    console.log(this.firstName + " " + this.lastName + "from" + city+", " + state)
                            }
const name ={
            firstName : "Vikrant",
            lastName : "Singh",
}
printFullName.call(name, "Noida", "UP")
//Output : Vikrant  Singh from Noida , UP

const name2 ={
            firstName : "Sachin",
            lastName : "Tendulkar",
}
printFullName.call(name2, "Mumbai, "Maharashtra")

The apply() method calls a function with a given this value, and arguments provided as an array

let printFullName = function(city, state) {
                    console.log(this.firstName + " " + this.lastName + "from" + city+", " + state)
                            }
const name ={
            firstName : "Vikrant",
            lastName : "Singh",
}
printFullName.apply(name, ["Noida", "UP"])
//Output : Vikrant  Singh from Noida , UP

The only difference between call and bind is the way we pass the arguments.

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

It generally creates a copy of the function in a variable so that it can called later

let printMyName = printFullName.bind(name, "Noida", "UP")
        console.log(printMyName)
Output : ƒ (city, state) {
          console.log(this.firstName + "  " + this.lastName + " from " + city+" , " + state)
                            }
printMyName() // function Invoke at any place
//Output : Vikrant  Singh from Noida , UP