Change the context (this) of the function using call(), apply() and bind() method

JavaScript code is always run with the some form of context. That is the object, an object within which it is operating. Yes, We are able to change the context(this) of the function using the there methods of the function, that is call(), apply() and bind().

In my previous article I describe the context(this) in some details, Please click here to read more about the context(this).

For changing the context(this) of the function, JavaScript provides us 3 methods that is call(), apply() and bind(). This 3 function doing the same job in different – different way, we can use any of these methods as per our need.

call() method

• call() is method of the function.
• We can use the call() method to change the context of the function.
• We have to pass the context as the arguments while calling the call() method.
• We can also able to pass the parameter or arguments to the function by passing that parameter to the call() method.
• call() method will call the function immediately

Example:

<div id="div">Style will changed!!!</div>
<script type="text/javascript">
function changeStyle() {
        this.style.height = "300px";
        this.style.backgroundColor = "red";
        this.style.color = "white";
        this.innerHTML = "Style is changed!!!";
}

var div = document.getElementById("div");
changeStyle.call(div);
</script>

In above example, I changed the style of the div by calling the function changeStyle(). In changeStyle() I am using the “this” object and applying the style to the any specific element by calling the call method and setting the context(this) to the changeStyle() function.

Here First I find the element div using the document.getElementById() and after that I called the changeStyle() function using the call method by passing the div tag as the parameter. So call method will set the context(this) of the changeStyle() to the div and immediately call the changeStyle().

So now the changeStyle() function’s “this” is pointing to the div element so all style will be now apply to the div.

Call() method with parameter

We can also able to pass the multiple arguments to the changeStyle() function by after passing the context(this) argument.

Example:

<div id="div">Total is:</div>
<script type="text/javascript">
function addition(msg1, msg2) {
        this.innerHTML = "Total is: " + (parseInt(msg1) + parseInt(msg2));
}

var div = document.getElementById("div");
addition.call(div, 10, 10);
</script>

As you seen in above example, I also called the addition function method using the call() method by passing the context(this) and another multiple argument. So call() method will set the context(this) of the addition() method to the div and also pass the two argument and call the addition function immediately.

addition() function will add the both argument and set the total to the div.

apply() method

• apply() is method of the function.
• We can use the apply() method to set the context(this) of the function.
• We have to pass the context as the argument to the apply() method while calling the apply() method.
• If we want to pass the parameter to the function so now we have to pass that parameter as the array. It does not matter the number of the argument is single or multiple.
• apply() method will call the function immediately.

Example:

<div id="div">Style will changed!!!</div>
<script type="text/javascript">
function changeStyle() {
    this.style.height = "300px";
    this.style.backgroundColor = "red";
    this.style.color = "white";
    this.innerHTML = "Style is changed!!!";
}

var div = document.getElementById("div");
changeStyle.apply(div);
</script>

Here changeStyle() method will also change the style of the specific element. Here I first get the div element using the getElementById and after that I call the function changeStyle() using the apply method and I passed the div to the apply method.

Here apply method will set the context of the function to the div and call the changeStyle function immediately. So now changeStyle() function’s “this” is pointing to the div so all the style will be apply to the div now.

apply() method with parameter.

We can also able to pass the single or multiple arguments to the function as the array.

<div id="div">Total is:</div>
<script type="text/javascript">
function addition() {
        var total = 0;
        for (var i = 0; i < arguments.length; i++) {
                var n = arguments[i];
                total += n;
        }
        this.innerHTML = total;
}

var div = document.getElementById("div");
var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
addition.apply(div, nums);
</script>

Yes but remember that while calling the apply() we are giving the array, but at the function we will not receive the array, but we will receive the total number of argument as the length of the array. So in above function I used the arguments object that have all the parameter that we passed using the apply() method.

bind() method

• bind() is method of the function.
• We can also use the bind() method to the set the context(this) of the function.
• We have to pass the context(this) as the parameter to the bind() method while calling the bind() method.
• We can also able to pass the parameter or argument to the function by passing that parameter to the bind() method as the argument.
• bind() method can not call the function immediately.
• bind() method will return the new function with changing the context of the function.

Yes bind() method will not call the function immediately. It will give the new function after setting the context(this) of the function.

<button id="btn">Click here!!!</button>
<div id="div">Click button to apply the style</div>
<script type="text/javascript">
        function changeStyle() {
                this.style.backgroundColor = "red";
                this.style.color = "white";
                this.style.fontSize = "32px";
                this.innerHTML = "Button is clicked!!";
        }

        var btn = document.getElementById("btn");
        var div = document.getElementById("div");
        btn.onclick = changeStyle.bind(div);
</script>

In above example changeStyle() function only will be call on the click of the button. Because the bind() will not call the function immediately. It simply change the context of the function and creates the copy of the function and return it.

So every time when copy of the function is called that changeStyle() is called with new context.

bind() method with parameter

We can also pass the parameter to function by the bind method, Here we does not have to pass the array of the argument. We simply have to pass all the argument one by one in the bind method.

We can also pass the argument to the changeStyle() function by the bind() function, It will pass the same argument every to the function when it is called.

<button id="btn">Add 5</button>
<div id="div">30</div>
<script type="text/javascript">
    var num = 30;
    function addition(n) {
        num += n;
        this.innerHTML = num;
    }

    var btn = document.getElementById("btn");
    var div = document.getElementById("div");
    btn.onclick = addition.bind(div, 5);
</script>

call() vs apply() vs bind()

call() and apply() method will call the function immediately, but the bind() method will not call the function immediately, Because the bind() method return the copy of the function and we have to use that copy to call the function.

apply() method accept the array of the argument that we want to pass the function, but call() and bind() function accept separate arguments.

I hope you enjoyed this article, Please comment down your review about this.

Happy Coding...

🙂