purpose of .bind(this) at end of ajax callback?

Question

From the reactjs tutorial, what\'s the purpose of having .bind(this) at the end of the ajax callback? Does code work correctly without it?

        d         


        

Answer 1

The purpose of having .bind(this) at the end of the ajax callback is let this be related to your react class. In other words you can add:

var self = this;

outside of ajax and it works the same. You code equal to:

var self = this;
$.ajax({
    .
    .
    data: JSON.stringify({text: text}),
    success: function (data) {
        self.setState({data: data});
    },
    .
    .
});

Answer 2

It ensure's this will be the correct object inside the callback. See Function.prototype.bind().

An alternative specific to react is to do:

myAjaxFunction: function(){
  $.getJSON('/something', this.handleData);
},
handleData: function(data){
  this.setState({data: data});
}

This works because React handles binding of component methods for you.

If you ran your original code in without bind, you'd get this error: TypeError: undefined is not a function because this === window in the callback;

or in strict mode: TypeError: Cannot read property 'setState' of undefined, where this === undefined in the callback.