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?
As others have explained, var self = this; allows code in a closure to refer back to the parent scope.
The keyword self is used to refer to the current class itself within the scope of that class only whereas, $this is used to refer to the member variables and function for a particular instance of a class.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With