Difference between bind and var self=this?

- 1 answer

Ad

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?

Ad

Answer

Ad

Given that you're targeting Node.js which implements ES2015 you are better off using arrow functions. Arrow functions have what is called a lexicalthis, 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.

Ad
source: stackoverflow.com
Ad