What is the use of the JavaScript bind method

Question

What is the use of bind   in JavaScript

User · Answer

The simplest use of bind   is to make a function that  no matter how it is called  is called with a particular this value   x   9  var module         x  81      getX  function              return this x            module getX       81  var getX   module getX  getX       9  because in this case   this  refers to the global object     create a new function with  this  bound to module var boundGetX   getX bind module   boundGetX       81   Please refer this link for more information   https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Function bind

User · Answer

Bind creates a new function that will force the this inside the function to be the parameter passed to bind     Here s an example that shows how to use bind to pass a member method around that has the correct this   var myButton       content   OK     click         console log this content     clicked            myButton click     var looseClick   myButton click  looseClick       not bound   this  is not myButton - it is the globalThis  var boundClick   myButton click bind myButton   boundClick       bound   this  is myButton   Which prints out   OK clicked undefined clicked OK clicked   You can also add extra parameters after the 1st  this  parameter and bind will pass in those values to the original function  Any additional parameters you later pass to the bound function will be passed in after the bound parameters      Example showing binding some parameters var sum   function a  b      return a   b      var add5   sum bind null  5   console log add5 10      Which prints out   15   Check out JavaScript Function bind for more info and interactive examples   Update  ECMAScript 2015 adds support for   gt  functions     gt  functions are more compact and do not change the this pointer from their defining scope  so you may not need to use bind   as often  For example  if you wanted a function on Button from the first example to hook up the click callback to a DOM event  the following are all valid ways of doing that   var myButton              As above   hookEvent element           Use bind   to ensure  this  is the  this  inside click       element addEventListener  click   this click bind this             Or    var myButton              As above   hookEvent element           Use a new variable for  this  since  this  inside the function        will not be the  this  inside hookEvent       var me   this      element addEventListener  click   function     me click                    Or   var myButton              As above   hookEvent element             gt  functions do not change  this   so you can use it directly     element addEventListener  click        gt  this click

User · Answer

From the MDN docs on Function prototype bind         The bind   method creates a new function that  when called  has its   this keyword set to the provided value  with a given sequence of   arguments preceding any provided when the new function is called    So  what does that mean    Well  let s take a function that looks like this    var logProp   function prop        console log this prop         Now  let s take an object that looks like this    var Obj         x   5      y   10      We can bind our function to our object like this    Obj log   logProp bind Obj     Now  we can run Obj log anywhere in our code    Obj log  x       Output   5 Obj log  y       Output   10   This works  because we bound the value of this to our object Obj      Where it really gets interesting  is when you not only bind a value for this  but also for its argument prop    Obj logX   logProp bind Obj   x    Obj logY   logProp bind Obj   y      We can now do this    Obj logX       Output   5 Obj logY       Output   10   Unlike with Obj log  we do not have to pass x or y  because we passed those values when we did our binding

User · Answer

Another usage is that you can pass binded function as an argument to another function which is operating under another execution context   var name    sample   function sample      console log this name     var cb   sample bind this    function somefunction cb       other code   cb      somefunction call     cb

User · Answer

bind is a function which is available in java script prototype  as the name suggest bind is used to bind your function call to the  context whichever you are dealing with for eg    x000D   x000D      var rateOfInterest  4    x000D      var axisBank  x000D        x000D      rateOfInterest  10    x000D      getRateOfInterest function   x000D        x000D      return this rateOfInterest  x000D        x000D        x000D      axisBank getRateOfInterest      10    x000D   x000D   x000D      let knowAxisBankInterest axisBank getRateOfInterest    when you want to assign the function call to a varaible we use this syntax x000D      knowAxisBankInterest       you will get output as  4   here by default the function is called wrt global context x000D   x000D  let knowExactAxisBankInterest knowAxisBankInterest bind axisBank         so here we need bind function call  to its local context x000D   x000D   x000D      knowExactAxisBankInterest       10    x000D   x000D   x000D

User · Answer

i did not read above code but i learn something in simple so want to share here about bind method after bind method we can use it as any normal method   lt pre gt  note  do not use arrow function it will show error undefined   lt  pre gt    x000D   x000D  let solarSystem         sun   red       moon    white       sunmoon   function           let dayNight   this sun     is the sun color and present in day and   this moon     is the moon color and prenet in night           return dayNight           let work   function work sleep       console log this sunmoon        accessing the solatSystem it show error undefine sunmmon untill now because we can t access directly for that we use  bind       console log  i work in    work    and sleep in   sleep      let outPut   work bind solarSystem   outPut  day   night   x000D   x000D   x000D

User · Answer

function prototype bind   accepts an Object   It binds the calling function to the passed Object and the returns the same   When an object is bound to a function  it means you will be able to access the values of that object from within the function using  this  keyword    It can also be said as   function prototype bind   is used to provide change the context of a function    x000D   x000D  let powerOfNumber   function number      let product   1      for let i 1  i lt   this power  i            product  number        return product      let powerOfTwo   powerOfNumber bind  power 2    alert powerOfTwo 2     let powerOfThree   powerOfNumber bind  power 3    alert powerOfThree 2     let powerOfFour   powerOfNumber bind  power 4    alert powerOfFour 2    x000D   x000D   x000D   Let us try to understand this      let powerOfNumber   function number          let product   1        for  let i   1  i  lt   this power  i              product    number                return product         Here  in this function  this corresponds to the object bound to the function powerOfNumber  Currently we don t have any function that is bound to this function  Let us create a function powerOfTwo which will find the second power of a number using the above function    let powerOfTwo   powerOfNumber bind  power 2      alert powerOfTwo 2     Here the object  power   2  is passed to powerOfNumber function using bind  The bind function binds this object to the powerOfNumber   and returns the below function to powerOfTwo  Now  powerOfTwo looks like      let powerOfNumber   function number          let product   1          for let i 1  i lt  2  i                product  number                return product         Hence  powerOfTwo will find the second power  Feel free to check this out  bind   function in Javascript

User · Answer

Simple example function lol second  third        console log this first  second  third      lol       undefined  undefined  undefined lol  1       undefined   quot 1 quot   undefined lol  1    2       undefined   quot 1 quot    quot 2 quot   lol call  first   1         quot 1 quot   undefined  undefined lol call  first   1     2        quot 1 quot    quot 2 quot   undefined lol call  first   1     2    3        quot 1 quot    quot 2 quot    quot 3 quot   lol apply  first   1         quot 1 quot   undefined  undefined lol apply  first   1      2    3         quot 1 quot    quot 2 quot    quot 3 quot   const newLol   lol bind  first   1      newLol        quot 1 quot   undefined  undefined newLol  2        quot 1 quot    quot 2 quot   undefined newLol  2    3        quot 1 quot    quot 2 quot    quot 3 quot   const newOmg   lol bind  first   1     2    newOmg        quot 1 quot    quot 2 quot   undefined newOmg  3        quot 1 quot    quot 2 quot    quot 3 quot   const newWtf   lol bind  first   1     2    3    newWtf        quot 1 quot    quot 2 quot    quot 3 quot

User · Answer

As mentioned  Function bind   lets you specify the context that the function will execute in  that is  it lets you pass in what object the this keyword will resolve to in the body of the function   A couple of analogous toolkit API methods that perform a similar service   jQuery proxy    Dojo hitch

User · Answer

Summary   The bind   method takes an object as an first argument and creates a new function  When  the function is invoked the value of this in the function body will be the object which was passed in as an argument in the bind   function   How does this work in JS anyway  The value of this in javascript is dependent always depends on what Object the function is called  The value of this always refers to the object left of the dot from where is the function is called  In case of the global scope this is window  or global in nodeJS   Only call  apply and bind can alter the this binding differently  Here is an example to show how the this keyword works    x000D   x000D  let obj     x000D    prop1  1  x000D    func  function      console log this      x000D    x000D   x000D  obj func         obj left of the dot so this refers to obj x000D   x000D  const customFunc   obj func      we store the function in the customFunc obj x000D   x000D  customFunc        now the object left of the dot is window   x000D                    customFunc   is shorthand for window customFunc   x000D                    Therefore window will be logged x000D   x000D   x000D    How is bind used   Bind can help in overcoming difficulties with the this keyword by having a fixed object where this will refer to  For example    x000D   x000D  var name    globalName   x000D   x000D  const obj     x000D    name   myName   x000D    sayName  function      console log this name    x000D    x000D   x000D  const say   obj sayName     we are merely storing the function the value of this isn t magically transferred x000D   x000D  say       now because this function is executed in global scope this will refer to the global var x000D   x000D  const boundSay   obj sayName bind obj      now the value of this is bound to the obj object x000D   x000D  boundSay        Now this will refer to the name in the obj object   myName  x000D   x000D   x000D    Once the function is bound to a particular this value we can pass it around and even put it on properties on other objects  The value of this will remain the same

User · Answer

The bind function creates a new function with the same function body as the function it is calling  It is called with the this argument  why we use bind fun    when every time  a new instance is created and we have to use first initial instance then we use bind fun We can t override the bind fun simply it stores the initial object of the class   setInterval this animate to bind this   1000 this difference

User · Answer

Bind Method  A bind implementation might look something like so   Function prototype bind   function        const self   this    const args       arguments     const context   args shift       return function          return self apply context  args concat     arguments               The bind function can take any number of arguments and return a new function   The new function will call the original function using the JS Function prototype apply method The apply method will use the first argument passed to the target function as its context  this   and the second array argument of the apply method will be a combination of the rest of the arguments from the target function  concat with the arguments used to call the return function  in that order    An example can look something like so    x000D   x000D  function Fruit emoji    x000D    this emoji   emoji  x000D    x000D   x000D  Fruit prototype show   function      x000D    console log this emoji   x000D     x000D   x000D  const apple   new Fruit      x000D  const orange   new Fruit      x000D   x000D  apple show         x000D  orange show        x000D   x000D  const fruit1   apple show  x000D  const fruit2   apple show bind    x000D  const fruit3   apple show bind apple   x000D  const fruit4   apple show bind orange   x000D   x000D  fruit1       undefined x000D  fruit2       undefined x000D  fruit3        x000D  fruit4        x000D   x000D   x000D

User · Answer

The bind   method creates a new function instance whose this value is bound to the value that was passed into bind     For example       window color    red       var o     color   blue         function sayColor            alert this color             var objectSayColor   sayColor bind o       objectSayColor      blue    Here  a new function called objectSayColor   is created from sayColor   by calling bind   and passing in the object o  The objectSayColor   function has a this value equivalent to o  so calling the function  even as a global call  results in the string    blue    being displayed   Reference   Nicholas C  Zakas - PROFESSIONAL JAVASCRIPT   FOR WEB DEVELOPERS

User · Answer

Simple Explanation   bind   create a new function  a new reference at a function it returns to you   In parameter after this keyword  you pass in the parameter you want to preconfigure  Actually it does not execute immediately  just prepares for execution   You can preconfigure as many parameters as you want   Simple Example to understand bind   function calculate operation      if  operation      ADD        alert  The Operation is Addition        else if  operation      SUBTRACT        alert  The Operation is Subtraction           addBtn addEventListener  click   calculate bind this   ADD     subtractBtn addEventListener  click   calculate bind this   SUBTRACT

User · Answer

Consider the Simple Program listed below      we create object user let User     name   Justin        a Hello Function is created to Alert the object User  function Hello       alert this name        since there the value of this is lost we need to bind user to use this keyword let user   Hello bind User   user       we create an instance to refer the this keyword  this name

User · Answer

I will explain bind theoretically as well as practically  bind in javascript is a method -- Function prototype bind   bind is a  method  It is called on function prototype  This method creates a function whose body is similar to the function on which it is called but the  this  refers to the first parameter passed to the bind method  Its syntax is       var bindedFunc   Func bind thisObj optionsArg1 optionalArg2 optionalArg3         Example --    var checkRange   function value         if typeof value      number                  return false                else            return value  gt   this minimum  amp  amp  value  lt   this maximum                 var range    minimum 10 maximum 20      var boundedFunc   checkRange bind range     bounded Function  this refers to range   var result   boundedFunc 15     passing value   console log result     will give true

User · Answer

Creating a new Function by Binding Arguments to Values  The bind method creates a new function from another function with one or more arguments bound to specific values  including the implicit this argument    Partial Application  This is an example of partial application  Normally we supply a function with all of its arguments which yields a value  This is known as function application  We are applying the function to its arguments    A Higher Order Function  HOF   Partial application is an example of a higher order function  HOF  because it yields a new function with a fewer number of argument    Binding Multiple Arguments  You can use bind to transform functions with multiple arguments into new functions      x000D   x000D  function multiply x  y     x000D      return x   y   x000D    x000D   x000D  let multiplyBy10   multiply bind null  10   x000D  console log multiplyBy10 5    x000D   x000D   x000D    Converting from Instance Method to Static Function  In the most common use case  when called with one argument the bind method will create a new function that has the this value bound to a specific value  In effect this transforms an instance method to a static method     x000D   x000D  function Multiplier factor     x000D      this factor   factor  x000D    x000D   x000D  Multiplier prototype multiply   function x     x000D      return this factor   x   x000D    x000D   x000D  function ApplyFunction func  value    x000D      return func value   x000D    x000D   x000D  var mul   new Multiplier 5   x000D   x000D     Produces garbage  NaN  because multiplying  undefined  by 10 x000D  console log ApplyFunction mul multiply  10    x000D   x000D     Produces expected result  50 x000D  console log ApplyFunction mul multiply bind mul   10    x000D   x000D   x000D    Implementing a Stateful CallBack  The following example shows how using binding of this can enable an object method to act as a callback that can easily update the state of an object    x000D   x000D  function ButtonPressedLogger   x000D    x000D     this count   0  x000D     this onPressed   function     x000D        this count    x000D        console log  pressed a button     this count     times    x000D       x000D     for  let d of document getElementsByTagName  button    x000D        d onclick   this onPressed bind this   x000D    x000D   x000D  new ButtonPressedLogger          x000D   lt button gt press me lt  button gt  x000D   lt button gt no press me lt  button gt  x000D   x000D   x000D

User · Answer

Bind is a method inherited from Function prototype same like call and apply    It basically helps to bind a function to an object s context during initialisation             window myname    Jineesh     var foo   function       return this myname        IE  lt  8 has issues with this  supported in ecmascript 5 var obj          myname    John        fn foo bind window    binds to window object     console log  obj fn         Returns Jineesh

User · Answer

In addition to what have been said  the bind   method allows an object to borrow a method from another object without making a copy of that method  This is known as function borrowing in JavaScript

User · Answer

Variables has local and global scopes  Let s suppose that we have two variables with the same name  One is globally defined and the other is defined inside a function closure and we want to get the variable value which is inside the function closure  In that case we use this bind   method  Please see the simple example below    x000D   x000D  var x   9     this refers to global  window  object here in the browser x000D  var person     x000D    x  81  x000D    getX  function     x000D      return this x  x000D      x000D     x000D   x000D  var y   person getX     It will return 9  because it will call global value of x var x 9   x000D   x000D  var x2   y bind person      It will return 81  because it will call local value of x  which is defined in the object called person x 81   x000D   x000D  document getElementById  demo1   innerHTML   y    x000D  document getElementById  demo2   innerHTML   x2    x000D   lt p id  demo1  gt 0 lt  p gt  x000D   lt p id  demo2  gt 0 lt  p gt  x000D   x000D   x000D

User · Answer

bind allows-   set the value of  this  to an specific object  This becomes very helpful as sometimes this is not what is intended  reuse methods curry a function   For example  you have a function to deduct monthly club fees  function getMonthlyFee fee     var remaining   this total - fee    this total   remaining    return this name    remaining balance   remaining      Now you want to reuse this function for a different club member  Note that the monthly fee will vary from member to member    Let s imagine Rachel has a balance of 500  and a monthly membership fee of 90   var rachel    name  Rachel Green   total 500     Now  create a function that can be used again and again to deduct the fee from her account every month    bind var getRachelFee   getMonthlyFee bind rachel  90     deduct getRachelFee     Rachel Green remaining balance 410 getRachelFee     Rachel Green remaining balance 320   Now  the same getMonthlyFee function could be used for another member with a different membership fee  For Example  Ross Geller has a 250 balance and a monthly fee of 25  var ross    name  Ross Geller   total 250     bind var getRossFee   getMonthlyFee bind ross  25     deduct getRossFee      Ross Geller remaining balance 225 getRossFee      Ross Geller remaining balance 200

[javascript] What is the use of the JavaScript 'bind' method?

Examples related to javascript

Examples related to function

Examples related to bind