call, apply and bind
let person = {
firstname: 'John',
lastname: 'Doe',
getFullName: function() {
let fullname = this.firstname + ' ' + this.lastname;
return fullname;
}
}
// console.log(person)
// console.log(person.firstname)
// console.log(person.lastname)
// console.log(person.getFullName())
/* bind()
/* using bind() function/method return a new function. So, it actually makes a copy of logName function.
========================================================================================================== */
// Example 1
let logName = function(lang1, lang2) {
console.log('Logged: ' + this.getFullName());
console.log('Arguments: ' + lang1 + ' ' + lang1)
console.log('------------------------------------------------------------------');
}.bind(person);
// Example 2
let logPersonName = logName.bind(person);
logPersonName('eng', 'en');
logName('eng', 'en');
/* call() / apply()
/* this will call a function and involke it
/* unlike bind() is created a copy, call() execute it
/* the apply() method takes an array
========================================================================================================== */
logName.call(person, 'eng', 'en');
logName.apply(person, ['eng', 'en']);
// function borrowing
let person2 = {
firstname: 'Jane',
lastname: 'Doe'
}
// what happening here is person2 that is borrowing a function from person object.
console.log(person.getFullName.apply(person2)); // ex.1
console.log(person.getFullName.call(person2)); // ex.2
console.log('------------------------------------------------------------------');
// another example of call()
var asim = {
checkThis: function(){
function checkOther(){
console.log(this)
}
// one of the reason to use the function "call" is to
//stabilize the value of "this" is to define
//and be very explicit regarding what you want "this"
//to be in the function that you're calling.
checkOther.call(this)
}
}
asim.checkThis()
function a(b,c,d){
console.log(this);
console.log(b);
console.log(c);
console.log(d);
}
a.call(1,2,3,4);
// apply()
var applyArr = [2,3,4];
a.apply(1,applyArr);
// function currying
console.log('function currying');
function multiply(a, b) {
return a * b;
}
let multiplyByTwo = multiply.bind(this, 2); // 2 is an a argument
console.log(multiplyByTwo(9)); // 9 is b argument
// Example 2
var john = {
name: 'John',
age: 26,
job: 'teacher',
presentation: function(style, timeOfDay) {
if (style === 'formal') {
console.log('Good ' + timeOfDay + ', Ladies and gentlemen! I\'m ' + this.name + ', I\'m a ' + this.job + ' and I\'m ' + this.age + ' years old.');
} else if (style === 'friendly') {
console.log('Hey! What\'s up? I\'m ' + this.name + ', I\'m a ' + this.job + ' and I\'m ' + this.age + ' years old. Have a nice ' + timeOfDay + '.');
}
}
};
var emily = {
name: 'Emily',
age: 35,
job: 'designer'
};
john.presentation('formal', 'morning');
john.presentation.call(emily, 'friendly', 'afternoon');
//john.presentation.apply(emily, ['friendly', 'afternoon']);
var johnFriendly = john.presentation.bind(john, 'friendly');
johnFriendly('morning');
johnFriendly('night');
var emilyFormal = john.presentation.bind(emily, 'formal');
emilyFormal('afternoon');
// Another cool example
var years = [1990, 1965, 1937, 2005, 1998];
function arrayCalc(arr, fn) {
var arrRes = [];
for (var i = 0; i < arr.length; i++) {
arrRes.push(fn(arr[i]));
}
return arrRes;
}
function calculateAge(el) {
return 2016 - el;
}
function isFullAge(limit, el) {
return el >= limit;
}
var ages = arrayCalc(years, calculateAge);
var fullJapan = arrayCalc(ages, isFullAge.bind(this, 20));
console.log(ages);
console.log(fullJapan);
// Example
function sun(){
var total = 0;
for(var i =0; i < arrguments.length; i++){
total += arrguments[i];
}
return total;
}
var things = [1,2,3,4,5,6,7,8,9];
// apply()
var x = sum.apply(things);
console.log(x);
// call()
var x = sum.call(null, 1,2,3,4);
console.log(x);