Search code examples
javascriptreactjsthisbindreact-native

Difference between bind and var self=this?


In my react native code, I am using both the bind(this) and var self = this; at multiple places across modules.

Both are solving the problem of resolving this keyword at the right places.

Here are my codes(2 code to perform the same functionality)-

  1. Using bind(this)

    retval.then(function (argument) {
        console.log("argument"+JSON.stringify(argument));
        this.stateSetting(argument);
    }.bind(this));
    
  2. Using var self = this

    var self = this;
    retval.then(function (argument) {
       console.log("argument"+JSON.stringify(argument));
       self.stateSetting(argument);
    });
    

Considering they both do the same job, I am curious to know what is the right way to do it? Is there an issue in using one or the other? Or is there a better way to do it?


Solution

  • Given that you're targeting Node.js which implements ES2015 you are better off using arrow functions. Arrow functions have what is called a lexical this, which means that the variable this in an arrow function is treated like a normal variable and will be closed over when you create the function.

    So your code becomes:

    retval.then((argument) => {
        console.log("argument"+JSON.stringify(argument));
        // "this" will inherit the value of the outside scope
        this.stateSetting(argument); 
    });
    

    If targeting ES5 (older browsers), then I'd favor the .bind style rather than var self = this. It's more structured and closer to a functional approach, which makes the code easier to reason about like you must have discovered by using promises. It also seems to be slightly more performant.