3

Hi I was under the impression that if you use a arrow function, this refers to the enclosing scope as explained on the following link

https://www.sitepoint.com/bind-javascripts-this-keyword-react/:

  1. ES2015 Arrows

The ES2015 specification introduces the arrow function syntax for writing function expressions. As well as being terser than regular function expressions, they can also have implicit return and most importantly, they always use the value of this from the enclosing scope.

In the example below this does not refer the the enclosing scope rather refers to the global scope.

addMeasurement(username,jsonObject){
    ...
    return fetch(measurementURL,
    {
        method: 'PATCH',
        body: jsonStringify
    }).then( (res) => { 
        // this below refers to the global context. 
        //Instead of the current instance and hence is undefined
        this.addMeasurementToAudit(username,jsonObject)             
        res.json() 
    });
}

Without arrow and explicitly binding this,works as expected:

addMeasurement(username,jsonObject){
    ...
    return fetch(measurementURL,
    {
        method: 'PATCH',
        body: jsonStringify
    }).then( function success(res) { 
        //this refers to the enclosing instance and works as expected
        this.addMeasurementToAudit(username,jsonObject)
        res.json() 
    }.bind(this));
},
Mulan
  • 129,518
  • 31
  • 228
  • 259
Shivam Sinha
  • 4,924
  • 7
  • 43
  • 65
  • 3
    before the return statement inside `addMeasurement`, what does `this` refer to? – Mauricio Poppe May 27 '16 at 07:47
  • 1
    Is this the *exact* code? If so & the latter works, the former should definitely work. How is `addMeasurement` called & defined? Is it in a class or object? – CodingIntrigue May 27 '16 at 07:49
  • @MauricioPoppe it refers to the the enclosing context ...e.g. the current instance – Shivam Sinha May 27 '16 at 07:50
  • @RGraham here is the full function: http://pastebin.com/VkPurviW – Shivam Sinha May 27 '16 at 07:52
  • 1
    @ShivamSinha That's not the full function because there is no enclosing scope to look at, nor does it show how `addMeasurement` is called. The trailing `,` makes me think it's an object but might not be. Not that it should make a difference but might make it easier to reproduce your issue – CodingIntrigue May 27 '16 at 07:53
  • @RGraham Here is more context to the question my MeasurementDAO..js addMeasurement calls -- > FirebaseRESTUtil.js .addMeasuement . I am using react native. http://pastebin.com/cK1BaFET – Shivam Sinha May 27 '16 at 07:58
  • This has nothing to do with arrows, because you have to use bind along with the normal function expression anyway –  May 27 '16 at 09:37
  • 3
    @ShivamSinha: That pastebin code is not the one you've shown here. `addMeasurementToLocal` is a function call not a method invocation, and something like that will be your problem. Also in `FirebaseRESTUtil.addMeasurement` you did *not* use an arrow function. – Bergi May 27 '16 at 12:33
  • IMO this should closed as not reproducible or as a duplicate of  [How to access the correct `this` / context inside a callback?](http://stackoverflow.com/q/20279484/218196). – Felix Kling May 27 '16 at 14:21
  • @Bergi yes that's because I replaced it with the success function which I described in the question. Also the question has both versions of the method including the fat arrow one. – Shivam Sinha May 27 '16 at 17:55
  • @FelixKling it is not a duplicate of that question...let me know if you want me to clarify any part of my question. I will attempt to provide reproducible results when I get the chance. – Shivam Sinha May 27 '16 at 17:56
  • The only reason why `this` wouldn't refer to the instance is if you don't call `addMeasurement` as a method of the instance. But if it works with `.bind` then the environment you are running the code in has a bug (and there is nothing we can do to fix that). – Felix Kling May 27 '16 at 18:04
  • @FelixKling Agreed. I'll attempt provide reproducible results within the next 24hrs. – Shivam Sinha May 27 '16 at 18:09
  • @FelixKling I was attempting to demo the problem on https://rnplay.org/ ...however they seem to have some issues right now. So instead I created two video 1. working https://vid.me/eokG 2. not working https://vid.me/n9GM with fat arrow. – Shivam Sinha May 28 '16 at 00:39

0 Answers0