As an aspiring web developer you've must have come across either or all of these three methods: call()
, apply()
, and bind()
. Always wanted to know how and when to use them? In this article I will show you how in a simply way!
RPG game
Let's say you are creating a RPG game and you have several functions that you want to use for every character:
// Basic actions as functions
function heal(amount) {
// heal this character
}
function setLevel(level) {
// sets level of this character
}
function mute() {
// mute this character
}
Notice how I am using the this keyword in every function? This is because we want to apply the function for a specific character in the game.
RPG actions
Let's place our functions inside an object for easier use (another name for functions inside objects is methods) and return some logic:
// Basic actions as methods
const actions = {
heal(amount) {
return this.health += amount;
},
setLevel(level) {
return this.level = level;
},
mute() {
return this.sound = false;
}
}
RPG characters
For our character let's create an object constructor that can produce characters:
// Object builder for characters
function Character (name, type, health) {
this.name = name;
this.type = type;
this.health = health;
}
const Jessica = new Character("Jessica", "wizard", 10);
const Patrick = new Character("Patrick", "warrior", 10);
We've just created Jessica the wizard and Patrick the warrior!
Jessica is hurt
What if Jessica is wandering around and suddenly gets in a fight with one of the monsters in our RPG world? She will use a potion to heal herself with 20 points. So we have to use our heal()
function with an amount of 20.
We've placed the heal function inside our object actions
but now we want to call this function onto Jessica:
actions.heal.call(Jessica, 20);
console.log(Jessica) // She now has 30 HP instead of 10!
We have applied our function and Jessica, and she is back to live. That is basically all that call
is: using a function directly on a receiver, in this case Jessica.
apply
does the same thing, except you give parameters as an array:
// Add new method to our actions
actions.move = function(x, y, z) {
return this.position = { x, y, z};
}
// Patrick's new location
const location = [2, 4, 6];
// Call new method on Patrick
actions.move.apply(Patrick, [...location]);
// Check where Patrick is now
console.log(Patrick.position); // { x: 2, y: 4, z: 6 }
Moving Patrick back to base
Let's say we want to move Patrick back into base camp with one command. Instead of writing our call
or apply
every time we can store this command with bind
:
// Command to move Patrick back to base
const patrickToBase = actions.move.bind(Patrick, 0, 0, 0)
// Move Patrick back
patrickToBase();
console.log(Patrick.position); // { x: 0, y: 0, z: 0 }
So as we have seen call()
, apply()
and bind()
are useful for borrowing methods (functions inside objects) to whatever object or primitive we want based on the value of the this
keyword.
Awesome! Hope you have a better understanding of these 3 useful methods.
Top comments (0)