call(), bind(), apply() method with this keyword in different object - 06

call(), bind(), and apply():

methods are used to refer "this" keyword to any object. With these methods, an object can use the method belonging to another object. 

call() method in different object:

call() method takes the arguments separately as an argument list.

call() method without arguments:

const mainObj = {
      name: "Mozahedul",
      age: 23,
      title: "Student",
      valMethod: function () {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
      },
    };

const anotherObj = {
      name: "Rashidul",
      age: 22,
      title: "Teacher",
};

mainObj.valMethod.call(anotherObj);
// Name: Rashidul, Age: 22

call() method with arguments:

const mainObj = {
      name: "Mozahedul",
      age: 23,
      title: "Student",
      valMethod: function (city, country) {
        console.log(`City: ${city}, Country: ${country}`);
      },
};

const anotherObj = {
      name: "Rashidul",
      age: 22,
      title: "Teacher",
    };

mainObj.valMethod.call(anotherObj, "Dhaka", "Bangladesh");
// Result: City: Dhaka, Country: Bangladesh

apply() method in different object:

apply() method takes arguments as an array.

apply() method without arguments:

const mainObj = {
      name: "Mozahedul",
      age: 23,
      title: "Student",
      valMethod: function () {
        console.log(`My name is ${this.name}, my age is ${this.age}.`);
      },
};

const anotherObj = {
      name: "Rashidul",
      age: 22,
      title: "Teacher",
};

mainObj.valMethod.apply(anotherObj);
// Result:
// My name is Rashidul, my age is 22.

apply() method with arguments:

const mainObj = {
      name: "Mozahedul",
      age: 23,
      title: "Student",
      valMethod: function (city, country) {
        console.log(
          `My name is ${this.name}, my age is ${this.age}, and I live in ${city}, ${country}.`,
        );
      },
};

const anotherObj = {
      name: "Rashidul",
      age: 22,
      title: "Teacher",
};

mainObj.valMethod.apply(anotherObj, ["Rangpur", "Bangladesh"]);
// Result: 
// My name is Rashidul, my age is 22, and I live in Rangpur, Bangladesh.

bind() method in different object:

bind() method takes arguments separately as an argument list.

bind() method without arguments:

 const mainObj = {
      name: "Mozahedul",
      age: 23,
      title: "Student",
      valMethod: function () {
        console.log(`My name is ${this.name}, my age is ${this.age}.`);
      },
    };

    const anotherObj = {
      name: "Rashidul",
      age: 22,
      title: "Teacher",
    };

    const person = mainObj.valMethod.bind(anotherObj);
    person();
    // Result:
    // My name is Rashidul, my age is 22.

bind() method with arguments:

const mainObj = {
      name: "Mozahedul",
      age: 23,
      title: "Student",
      valMethod: function (city, country) {
        console.log(
          `My name is ${this.name}, my age is ${this.age}, I live in ${city}, ${country}.`,
        );
      },
};

const anotherObj = {
      name: "Rashidul",
      age: 22,
      title: "Teacher",
};

const person = mainObj.valMethod.bind(anotherObj, "Rangpur", "Bangladesh");
person();
// Result:
// My name is Rashidul, my age is 22, I live in Rangpur, Bangladesh.
// Here, person is a function object, we have to invoke or call to execute 
// the object method.

call() vs apply() vs bind() :

• call() method and apply() method are executed instantly when we add these methods to an object.
• bind()  method is not executed instantly, it returns a function object and later we can use this function object anywhere we want.