What is the use of the JavaScript 'bind' method?

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 globalThisvar boundClick = myButton.click.bind(myButton);boundClick(); // bound, 'this' is myButton

Which prints out:

OK clickedundefined clickedOK 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 parametersvar 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 => functions. => 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) {    // => functions do not change 'this', so you can use it directly    element.addEventListener('click', () => this.click());  }};

The simplest use of bind() is to make a function that, no matterhow it is called, is called with a particular this value.

x = 9;var module = {    x: 81,    getX: function () {        return this.x;    }};module.getX(); // 81var getX = module.getX;getX(); // 9, because in this case, "this" refers to the global object// create a new function with 'this' bound to modulevar 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

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

//bindvar getRachelFee = getMonthlyFee.bind(rachel, 90);//deductgetRachelFee();//Rachel Green remaining balance:410getRachelFee();//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};//bindvar getRossFee = getMonthlyFee.bind(ross, 25);//deductgetRossFee(); //Ross Geller remaining balance:225getRossFee(); //Ross Geller remaining balance:200