ES6 introduces the new methods for objects, bind, call and apply, Here a simple example to explain them.
let car = {
name: 'Ford',
getName: function(){
return this.name;
}
};
let fullName = car.getName();
fullName;
// Ford
Bind
Bind create a new copy of the function, It accept a value as argument, let's see example:
let car = {
name: 'Ford',
getName: function(){
return this.name;
}
};
let fullName = car.getName.bind(car);
fullName();
In this example, we pass object car as argument to the bind method in the invocation of the getName method. this bind method create a new copy of the original getName method and sets this keyword from object car.
Here another example:
let car = {
name: 'Ford',
};
function getName(){
return this.name;
}
let fullName = getName.bind(car);
fullName();
Call
Call has similarity with bind, with some differences :
- Call doesn't create a new copy of the function, it just call the function with the given arguments
- Call immediately invoke the function
- Call accept arguments
let car = {
name: 'Ford',
getName: function(){
return this.name;
}
};
let firstCar = {name:'Honda'};
let secondCar = {name:'Toyota'};
car.getName.call(firstCar);
car.getName.call(secondCar);
Here another example, see how we can pass arguments to the call method:
let car = {
name: 'Ford',
getName: function(transmission){
return `${this.name} has ${this.horsePower} horse power and is a ${this.type} and transmission is ${transmission}`;
}
};
let firstCar = {name:'Honda', horsePower:'200', type:'SUV'};
let secondCar = {name:'Toyota', horsePower:'100', type:'Sedan'};
car.getName.call(firstCar, 'manual');
car.getName.call(secondCar,'automatic');
Apply
Is similar to call, but it accept an array of arguments instead of a list of arguments.
let car = {
name: 'Ford',
getName: function(transmission, color){
return `${this.name} has ${this.horsePower} horse power and is a ${this.type} and transmission is ${transmission} and color is ${color}`;
}
};
let firstCar = {name:'Honda', horsePower:'200', type:'SUV'};
let secondCar = {name:'Toyota', horsePower:'100', type:'Sedan'};
car.getName.apply(firstCar, ['manual', 'red']);
car.getName.apply(secondCar, ['automatic', 'blue']);
Top comments (0)