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?

  • 1
    Both work fine. I'd try to be somewhat consistent within a an app or at least a module. – Robert Moskal Dec 27 '15 at 19:16
  • 2
    ES6 arrow functions are a better way to do this. – Oriol Dec 27 '15 at 19:19
  • Thanks Robert :) Just wanted to know, if I do something like if(self === this) returns true. So, is there a way to destroy self? If it was an object I could have done - self = {}. Should I point self to null in this case? – bozzmob Dec 27 '15 at 19:22
  • @Oriol Yes indeed, I would surely go with ES6 arrow function. Can you please share a pesudo code for the same? I am using arrow functions in lot of other places. – bozzmob Dec 27 '15 at 19:23
  • 1
    Simply: retval.then((argument) => { console.log("argument"+JSON.stringify(argument)); this.stateSetting(argument); }); developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – lleaff Dec 27 '15 at 19:27
up vote 5 down vote accepted

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.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.