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)-
Using bind(this)
retval.then(function (argument) {
console.log("argument"+JSON.stringify(argument));
this.stateSetting(argument);
}.bind(this));
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?
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.