Javascript essentials: call, apply and bind methods

You might have read these stuff so many times and I am writing this in December of 2015 which is quite a bit late. What I am going to share today are some basic but essential to anyone's javascript knowledge. Well, we must know that Javascript itself creates a global object, that is window. Whatever function we make becomes a method for the window object. Therefore each time we use keyword `this` can refers to the window object.

The call, apply and bind are some native methods to point `this` to our desired object. Each method has its browser support and uses. This post would be sharing all of these. You should read my Javascript's basic knowledge, here are some of them:

• Glance over Javascript's Object Oriented behaviour
• Javascript Closure and nested function
• Memory leaks and memory management in Javascript

Bind method

var baby = {
  name: 'Muhammad Ali',
  age: '1 year'
}
// Creating a local baby object below
var hospital = {
  baby: {
    name: 'Saad',
    age: '2 year'
  },
  getBaby: function(e) {
      console.log('This is ' + this.baby.name + ' and he is ' + this.baby.age + ' old')
    }
}
var currentBaby = hospital.getBaby;
currentBaby(); // This is Muhammad Ali and he is 1 year old

With a start of code, this might result in a bit surprise. The log returns the Muhammad Ali and 1 year, this is because we called the method outside the object `hospital`, that is in global object `window`. `this` keyword in global object refers to `window` and the first baby object is in global scope. This is where we mistook the `this` keyword. What if I want to fix it, have a look at code below:

var currentBaby = hospital.getBaby.bind(hospital);
currentBaby(); // This is Saad and he is 2 year old

By just changing the last two lines we simply fixed this issue. One of the issue the PHP developer face while shifting to Javascript is the concept that whatever happens in global scope is actually connected to `window`, to which we need to change to the targeted object to use `this` as correct reference.

`this` in basic function

The basic concept of `this` should remain same. But what if we are taking about just a simple function with keyword `this`, well its simply that `window` object.

function hello(){
console.log(this)
}
hello(); //window{}

This will remain remain same unless we call this function with some object. We can use `this` keyword with some other object, string or any variable with `call` method. This method calls a function by attaching `this` to the passed argument.

function hello(anyArg){
console.log(this + " says hello " +anyArg)
}
hello.call('Hamza','World') // Hamza says hello World

So technically what parameters we pass in call method is actually having the first value of `this`. If you simply want window to target `this` then pass `null` as first parameter. Technically, we bind `this` with some object when we borrow a method from someone else.

Don't confuse it with $(this)

jQuery's $(this) is different from `this` in native Javascript. 

• `this` targets the DOM element.
• $(this) are jQuery objects, can be used only in jQuery

Every time we use $(this), jQuery creates a jQuery object with its methods, known as jQuery methods.

Apply and call method

Apply and call methods are same just the difference is:

• arguments are passed as individual in call method
• arguments are passed as array in apply

otherwise both of them serves the same.Here is the example of them:

var numbers=[1,2,3,4,5];
console.log(Math.max.apply(null,numbers)); // 5
console.log(Math.max.call(null,4,5,6,7)); // 7

`null` represents that `this` is still pointing towards window. The browser support is pretty comforting because it supports all browsers. Here is one more working example for call method.

var students = [{
  name: 'Muhammad Ali',
  class: '5'
}, {
  name: 'Sara',
  class: '6'
}, {
  name: 'Saad',
  class: '7'
}];
for (var i = 0; i < students.length; i++) {
  (function(s){
    var d=s+1;
    console.log('Number '+d+': '+this.name+ ' ('+this.class+')');
  }).call(students[i],i);
}
// Number 1: Muhammad Ali (5)
// Number 2: Sara (6)
// Number 3: Saad (7)