What is the usage of .bind()

Question

I'm reading this code, and I can't get my head around the .bind() function.

There is a function, and in that function I see this statement

 this.layers.forEach(function(d){
           //some logic here
        }.bind(this));

Now, what is .bind(this) used for ie what does it mean, and what would be different when it would not be added?

The whole function is this:

get_data: function()
    {
        this.layers = [];

        //more logic

      this.layers.forEach(function(d){
           //some logic here
        }.bind(this));

        return this.layers;

    },

Reading the docs for .bind() didn't make it clear to me

I've read the article which is said to be duplicate, but I don't get that answer, not in relation to the code I am reading. — Michel, Jun 27 '16 at 11:41
See this answer: http://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal/13441628#13441628 — slebetman, Jun 27 '16 at 12:03
https://stackoverflow.com/questions/2236747/use-of-the-javascript-bind-method this post answers it very well — , Nov 06 '17 at 02:17

Rayon · Accepted Answer · 2016-06-27T12:35:02.457

1

this context inside Array#forEach will be window, to have context of your-own(In your example, context of get_data), use .bind over callback-function

var obj = {
  foo: function() {
    this.fName = 'NAME';
    [0, 1, 2, 3].forEach(function() {
      console.log('' + this);
      console.log('' + this.fName);
    });
  },
  bar: function() {
    this.fName = 'NAME';
    [0, 1, 2, 3].forEach(function() {
      console.log('' + this.fName);
    }.bind(this));
  }
}
obj.foo();
obj.bar();

edited Jun 27 '16 at 12:35

answered Jun 27 '16 at 11:20

Rayon

36,219
4
49
76

did not know this: "this context inside Array#forEach will be window". So when I have a function, within that function 'this' points to the object the function is in. But in an array#foreach, this points to window? – Michel Jun 27 '16 at 11:44
@Michel, It is an impact of `jQuery` on us ;) – Rayon Jun 27 '16 at 11:45
What has it got to do with jQuery? – Evan Trimboli Jun 27 '16 at 11:51
Whow, this is weird to get my head around. And when I do `.bind(this)` and later on in the bar function I refer to `this.fName`, is that the same instance? – Michel Jun 27 '16 at 11:52
I took your code and played around with it, replacing `.bind(this)` to `.bind(otherobject)`, and then the `this` in the bar function is the `otherobject`. Coming from C# this is not easy to grasp – Michel Jun 27 '16 at 11:58
This sums up your misunderstanding: `within that function 'this' points to the object the function is in`. NO. Where `this` points to is a bit more complicated than that in javascript. See this answer to see how `this` works: http://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal/13441628#13441628. `.bind()` a function that allows you to change where `this` points to. – slebetman Jun 27 '16 at 12:05
When I do this `woo: function () { this.fName = 'NAME3'; [0, 1, 2, 3].forEach(function () { console.log('' + this.fName); }.bind(myobj)); }` and myobj is `var myobj = { fName : 'Michel' }` it still prints 'Michel' and not 'NAME3'... Can't I set the value for `this.fName` in this case? – Michel Jun 27 '16 at 12:07
@Michel, How is your `myobj` structured ? – Rayon Jun 27 '16 at 12:09
Understanding `this` in JavaScript is not a easy task! – Rayon Jun 27 '16 at 12:09
@Rayon: it is `var myobj = { fName : 'Michel' }` – Michel Jun 27 '16 at 12:11
@slebetman : nice post, didn't know it has that many rules. Now I know, so I know what to check when looking for `this` – Michel Jun 27 '16 at 12:12
@Michel, In your example, Property `fName` is overwritten by `NAME3`, Have some different name for `key` and you will get it. [Fiddle](https://jsfiddle.net/rayon_1990/nev17jmh/) – Rayon Jun 27 '16 at 12:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115725/discussion-between-michel-and-rayon). – Michel Jun 27 '16 at 12:24
Thanks for the great advice (in stead of directly pointing to another answer) – Michel Jun 27 '16 at 12:31

What is the usage of .bind()

1 Answers1