8

I am trying to access this inside my arrow function:

import myObject from '../myObjectPath';
export const myClass = Fluxxor.createStore({
    initialize() {
        this.list = [];
        this.id = null;
    },
    myOutsideFunction(variable1) {
        // here this in NOT undefined
        myObject.getMyList(this.id, (myList) => {
            // here this in undefined
            this.list = myList;
        } 
    });
)};

But inside arrow function which in ma callback function this is undefined!!

I am using babel to transpile the code:

myOutsideFunction: function myOutsideFunction() {
    var _this = this;
    myObject.getMyList(function (myList) {
        _this.list = myList;
    });
},
Besat
  • 1,428
  • 13
  • 27
  • Bind `this`, or store it in a temp variable outside the arrow function scope. – Jite Aug 16 '16 at 15:06
  • The value of `this` depends on how `myOutsideFunction` is called. How is it called? – Felix Kling Aug 16 '16 at 15:07
  • 1
    @Jite the whole idea of using arrow function is to not having to bind this! – Besat Aug 16 '16 at 15:25
  • @Besat, I actually didn't know that. Thought it was just a shorthand for a standard function call. Good to know, tyvm for that info. :) – Jite Aug 16 '16 at 15:26
  • 1
    @ Felix Kling myOutsideFunction is called from another function inside the class. But it shouldn't matter since myOutsideFunction HAS this. – Besat Aug 16 '16 at 15:26
  • 1
    @Jite Np :)) Although it does not work for me :D – Besat Aug 16 '16 at 15:27
  • According to ECMA-262 spec, arrow functions only have lexical context. – Leo Aug 16 '16 at 15:41

1 Answers1

5

If this is undefined within an arrow function, it's undefined outside of the arrow as well. Arrow function simply capture the this of the surrounding scope.

In this case, you're declaring myOutsideFunction as a method on an object literal and never binding it or doing anything else that would call it with the object as this.

When debugging, bear in mind that transpilers can rename variables (and have to rename this for it to capture correctly). Using the original name in the console without sourcemaps that include renaming will show you undefined even if the original value isn't. Make sure you use the transpiled name in watches or console commands.

ssube
  • 47,010
  • 7
  • 103
  • 140
  • 1
    strange cause it's written `// here this in NOT undefined` just before the function call, so `this`shouldn't be undefined in the arrow function – Olivier Boissé Aug 16 '16 at 15:09
  • @oliv37 strictly speaking, that's not possible. Arrow functions are a language feature and will always receive the same `this`. I'm not aware of any runtime with bugs around that (since it's pretty fundamental to arrow functions). – ssube Aug 16 '16 at 15:11
  • 1
    This is what I though!! it should not be possible! but I have tested several times and I get undefined inside arrow function however it is not undefined right before calling it – Besat Aug 16 '16 at 15:21
  • @Besat are you running this code through a transpiler or anything like that (babel, webpack, etc)? If so, can you include the output? It's possible that the compiler is changing some variable names so that it *appears* undefined in your console, but only because you're referencing the original (pre-transpile) name. – ssube Aug 16 '16 at 15:27
  • @ssube smart point! I am using babel. I will check right now. – Besat Aug 16 '16 at 15:28
  • 3
    @Besat babel will have to rename `this` since the real name is reserved, usually using `_this` instead. – ssube Aug 16 '16 at 15:32
  • @ ssube yes you are right.. I can see that in my transpiled code. but how can I fix it? – Besat Aug 16 '16 at 15:37
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121077/discussion-between-besat-and-ssube). – Besat Aug 16 '16 at 15:40
  • @Besat: So basically there was no issue with your code? – Felix Kling Aug 16 '16 at 16:51
  • Yes.. For future record: It may not show the correct value in console since babel change this to _this – Besat Aug 18 '16 at 14:10
  • What is the solution now?? I have strucked with the same thing..getting this as undefined in arrow function – Sunil Sunny Dec 11 '20 at 15:08
  • A fix is to not to use arrow function, but instead to use traditional `function() { YOUR_CODE }` – Max Mar 12 '21 at 09:42