Scribd Logo
Upload

Welcome to Scribd!

  • 22 views

    How-To: Call, Apply and Bind in Javascript: Niladri Sekhar Dutta

    Uploaded by

    nic315
    The document discusses the differences between the call(), apply(), and bind() methods in JavaScript. call() and apply() can be used to immediately invoke a function, changing the value of 'this' within the function. bind() returns a new function where 'this' is set, allowing the original function to be invoked later with the correct context. The key differences are that call() accepts arguments directly, apply() accepts arguments in an array, and bind() does not immediately invoke the function but returns a new one where 'this' is preset.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    How-To: Call, Apply and Bind in Javascript: Niladri Sekhar Dutta

    Uploaded by

    nic315
    22 views7 pages
    The document discusses the differences between the call(), apply(), and bind() methods in JavaScript. call() and apply() can be used to immediately invoke a function, changing the value of 'this' within the function. bind() returns a new function where 'this' is set, allowing the original function to be invoked later with the correct context. The key differences are that call() accepts arguments directly, apply() accepts arguments in an array, and bind() does not immediately invoke the function but returns a new one where 'this' is preset.

    Original Description:

    js

    Original Title

    js

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses the differences between the call(), apply(), and bind() methods in JavaScript. call() and apply() can be used to immediately invoke a function, changing the value of 'this' within the function. bind() returns a new function where 'this' is set, allowing the original function to be invoked later with the correct context. The key differences are that call() accepts arguments directly, apply() accepts arguments in an array, and bind() does not immediately invoke the function but returns a new one where 'this' is preset.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    22 views7 pages

    How-To: Call, Apply and Bind in Javascript: Niladri Sekhar Dutta

    Uploaded by

    nic315
    The document discusses the differences between the call(), apply(), and bind() methods in JavaScript. call() and apply() can be used to immediately invoke a function, changing the value of 'this' within the function. bind() returns a new function where 'this' is set, allowing the original function to be invoked later with the correct context. The key differences are that call() accepts arguments directly, apply() accepts arguments in an array, and bind() does not immediately invoke the function but returns a new one where 'this' is preset.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 7

    1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

    Niladri Sekhar Dutta FOLLOW


    Full stack .NET/Classic ASP/Angular2/4 developer

    How-to: call() , apply() and bind() in JavaScript


    Published Jun 05, 2017

    In this post, we will be discussing the di erence between call() , apply() ,


    and bind() methods of JavaScript functions with simple examples. As
    functions are also Objects in JavaScript, these 3 methods are used to control
    the invocation of the function. call() and apply() were introduced in
    ECMAScript 3 while bind() was added as part of ECMAScript 5.

    Uses
    You can use call() / apply() to invoke the function immediately. bind()
    returns a bound function that, when executed later, will have the correct
    context ("this") for calling the original function. So bind() can be used when
    the function needs to be called later in certain events when it's useful.

    To get a grasp of "this" in JavaScript, read Understanding "This" in JavaScript.

    or Function.prototype.call()
    Enjoy this post?
    call()  WRITE A POST
     34

    https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 1/7
    1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

    Check the code sample below for call()

    //Demo with javascript .call()

    var obj = {name:"Niladri"};

    var greeting = function(a,b,c){


    return "welcome "+this.name+" to "+a+" "+b+" in "+c;
    };

    console.log(greeting.call(obj,"Newtown","KOLKATA","WB"));
    // returns output as welcome Niladri to Newtown KOLKATA in WB

    The rst parameter in call() method sets the "this" value, which is the
    object, on which the function is invoked upon. In this case, it's the "obj" object
    above.

    The rest of the parameters are the arguments to the actual function.

    apply() or Function.prototype.apply()
    Check the below code sample for apply()

    Enjoy this post?  WRITE A POST


     34
    //Demo with javascript .apply()
    https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 2/7
    1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

    var obj = {name:"Niladri"};

    var greeting = function(a,b,c){


    return "welcome "+this.name+" to "+a+" "+b+" in "+c;
    };

    // array of arguments to the actual function


    var args = ["Newtown","KOLKATA","WB"];
    console.log("Output using .apply() below ")
    console.log(greeting.apply(obj,args));

    /* The output will be


    Output using .apply() below
    welcome Niladri to Newtown KOLKATA in WB */

    Similarly to call() method the rst parameter in apply() method sets the
    "this" value which is the object upon which the function is invoked. In this case
    it's the "obj" object above. The only di erence of apply() with the call()
    method is that the second parameter of the apply() method accepts the
    arguments to the actual function as an array.

    bind() or Function.prototype.bind()
    Check the below code sample for bind()

    Enjoy this post?  WRITE A POST


     34
    //Use .bind() javascript
    https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 3/7
    1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

    var obj = {name:"Niladri"};

    var greeting = function(a,b,c){


    return "welcome "+this.name+" to "+a+" "+b+" in "+c;
    };

    //creates a bound function that has same body and parameters


    var bound = greeting.bind(obj);

    console.dir(bound); ///returns a function

    console.log("Output using .bind() below ");

    console.log(bound("Newtown","KOLKATA","WB")); //call the bound function

    /* the output will be


    Output using .bind() below
    welcome Niladri to Newtown KOLKATA in WB */

    In the above code sample for bind() we are returning a bound function with
    the context which will be invoked later. We can see the bound function in the
    console as below .

    Enjoy this post?  WRITE A POST


     34

    https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 4/7
    1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

    The rst parameter to the bind() method sets the value of "this" in the target
    function when the bound function is called. Please note that the value for rst
    parameter is ignored if the bound function is constructed using the "new"
    operator.
    The rest of the parameters following the rst parameter in bind() method are
    passed as arguments which are prepended to the arguments provided to the
    bound function when invoking the target function.

    That's all for now. Thank you for reading and I hope this post will be helpful
    for beginners who are facing issues regarding the apply() , call() , and
    bind() methods of JavaScript.

    jQuery Objects Functions JavaScript Es5

    Enjoy this post? Give Niladri Sekhar Dutta a like if it's helpful.

     34 18  SHARE
    Enjoy this post?  WRITE A POST
     34

    https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 5/7
    1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

    Niladri Sekhar Dutta


    Full stack .NET/Classic ASP/Angular2/4 developer
    O cial contributor to the Sendgrid c# .NET SDK. Github link :
    https://github.com/sendgrid/sendgrid-csharp/ My javascript,jquery and Angular2 answers in
    Stackover ow https://stackover ow.com/users/3162724/niladri Microso...

    FOLLOW

    18 Replies

    Leave a reply

    farzad jafari a month ago 

    “the value for rst parameter is ignored if the bound function is


    constructed using the “new” operator.”

    can you explain with a sample to I understand above phrase.


    thank you for the answer and clear explanation

     Reply

    guy inform 2 months ago 

    clear explanation ♥

     1 Reply

    Demsong tsamo 3 months ago


    Enjoy this post?  34
     WRITE A POST

    https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 6/7
    1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

    Really nice article. Thanks.

     2 Reply

    Show more replies

    Dinesh Pandiyan

    Accessing Nested Objects in JavaScript

    Tanner Linsley

    ⚛ 🚀 Introducing React-Static — A progressive static-site framework for React!

    Sohaib Nehal

    Learn D3.js in 5 minutes

    Enjoy this post?  34

    https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 7/7

    You might also like