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)