42
loading...
call, apply and bind methods JavaScript
Let's consider an object having a few properties and a method as below
const person1 = {
first: "will",
last: "smith",
role: "actor",
getInfo: function () {
console.log(this.first + " " + this.last + "is" + this.role);
},
};
console.log(person1);It consoles to
JavaScript attaches some behind the scenes things to objects.
Here with the getInfo, JS has attached certain methods including call, apply and bind.
JavaScript attaches some behind the scenes things to objects.
Here with the getInfo, JS has attached certain methods including call, apply and bind.
Let's dig deep into them
Consider another object
const person2 = {
first: "taylor",
last: "swift",
role: "singer",
};What if we want to use getInfo method on person2, rather than copying it, we can borrow it from person1 object (function borrowing)
const person2 = {
first: "taylor",
last: "swift",
role: "singer",
};
// function borrowing
person1.getInfo.call(person2)
// console
// taylor swift is singerIn the function borrowing, this points to the object passed within parathesis.
But generally, if method is to be used in multiple objects, we keep this outside the objects
const person1 = {
first: "will",
last: "smith",
role: "actor",
};
const getInfo = function () {
console.log(this.first + " " + this.last + "is" + this.role);
}
getInfo.call(person1)
const person2 = {
first: "taylor",
last: "swift",
role: "singer",
};
getInfo.call(person2)
// console
// will smith is actor
// taylor swift is singerside example,what if getInfo has its own arguments. Then this keyword points to first argument
const person1 = {
first: "will",
last: "smith",
role: "actor",
};
const getInfo = function (place) {
console.log(this.first + " " + this.last + "is" + this.role + " from " + place);
}
getInfo.call(person1, "mars")
const person2 = {
first: "taylor",
last: "swift",
role: "singer",
};
getInfo.call(person2, "earth")
// console
// will smith is actor from mars
// taylor swift is singer from earthMoving towards apply method
Only difference between call & apply method is the way, we pass additional parameters to the method, for the above example, apply will work like this
Only difference between call & apply method is the way, we pass additional parameters to the method, for the above example, apply will work like this
getInfo.apply(person1, ["mars"])
getInfo.apply(person2, ["earth"])Now bind method
bind & call methods are also similar, bind method instead of invoking/calling it, it returns the copy of the method, which can be invoked later, let's see the example
let info1 = getInfo.bind(person1, "mars")
info()
//or
getInfo.bind(person1, "mars")()
// console
// will smith is actor from marsWe call the above behaviour as function currying, more about this in the coming blog -- stay tuned
42