JS: bind and function chaining

Question

I found the following code:

  this.element.click((function() {
    // some logic
  }).bind(this));

And here is another example:

render: function () {
    this.getAsyncData(function () {
        this.specialFunction();
        this.anotherSpecialFunction();
    }.bind(this));
}

As I understand it is function chaining, is it? Here is example from which, as I understand in order to use chains we neet the previous function to return something. I mean

var gmap = function() {
    this.add = function() {
        alert('add');
    return this; //HERE WE RETURN
    }

    this.del = function() {
       alert('delete');
       return this; //HERE WE RETURN
    }
}

var test = new gmap();
test.add().del();

Could you explain how bind works without return in previous function?

No. `bind` has absolutely nothing to do with function chaining (better known as [tag:method-chaining]) — Bergi, Dec 16 '14 at 17:55

Scott McDermid · Answer 1 · 2014-12-17T01:22:44.230

bind, in this case, isn't jQuery's event binder. It sets what this will be within the click handler.

function Cat() {
  this.name = 'Gordon';
  this.element = $('#someEl');

  this.element.click((function() {
    console.log(this.name);  // logs Gordon
  }).bind(this));
}

We're binding this to Cat, so that we can work with Cat's properties, like name. So this isn't really related to chaining..

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind Fiddle: http://jsfiddle.net/c4phfs8s/

score 1 · Accepted Answer · answered Dec 16 '14 at 17:49

1

.bind( is a method of the Function object which does effectively this:

function bind(that) {
  var self = this;
  return function () { 
     return self.apply(that, arguments); 
  };
}

See that .bind( returns a function that when called applies the given arguments to the function that .bind( was called on with the previously given this.

answered Dec 16 '14 at 17:49

Dan D.

73,243
15
104
123

Thank you for your time. I can't understand the magic how .bind gets the previous function. – Dec 16 '14 at 18:09
The previous function, `f` say, is the function object on which the method `f.bind(that)` gets called. – Dan D. Dec 16 '14 at 18:13
1

@PashaTurok It doesn't get the previous function in either of your first two code samples. Those are different `.bind` methods, provided as methods of the objects being chained. They are not the `Function.prototype.bind` which I believe you are researching. – JAAulde Dec 16 '14 at 18:14
@JAAulde Thank you for your time and help. But I think that Dan D is right here. It's really the prototype fo FUNCTION object. That's why it has access to "previous function". Thank you both of you for help. – Dec 16 '14 at 18:19
@PashaTurok, please disregard everything I said in this thread. I completely boneheaded in reading your first code sample. It was pointed out to me in the comments to my own answer and I have now deleted that answer. I'm terribly embarrassed that I went to such lengths down the wrong path! – JAAulde Dec 16 '14 at 18:30
1

@JAAulde Thank you very much. You tried so much to help me and Im very thankful to you. It's very rare in out time to find some who does all his best to help. I really appreciate it. Thank you! – Dec 16 '14 at 18:31

score 0 · Answer 3 · answered Dec 16 '14 at 17:49

.bind() allows you to bind an object to a function, so that if you use the keyword 'this' in the function 'this' will be that object

function test () {
this.a = 'hello';
this.b = 'world';
}
var callNewTest = new test;
(function test2 () {
console.log(this, this.a, this.b)
}).bind(callNewTest)

If you're talking about jQuery's .bind() method the docs state that it's for attaching event listeners, but in the example you gave, it uses the explanation above.

JS: bind and function chaining

3 Answers3