kaniosrn-j
6/10/2017 - 8:52 AM

call, apply and bind

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);