Javascript arrow function not getting 'this' in its enclosing function (React Native)

Question

This is the original code. However, the 'this' inside backHandleFunc does not match it's lexical scope componentDidMount

componentDidMount() {

    this.props.getStudentList(this.props.course._id)

    const backHandleFunc = () => {
      const studentStatus = StudentStatus.getStudentStatus(this.state.selected_student)
      const aca = ActionCreators.actions

      /*Processing checkout and in signature */
      const checkinSignature = (this.props.action == aca.OPEN_SIGNATURE && studentStatus == StudentStatus.NOT_IN_NOR_OUT)

      /*in one of the three screens, Alert, Covid, Signature (checkout), go back to classDetailScreen */
      const inThreeScreens = [aca.OPEN_CONFIRM_ALERT, aca.OPEN_COVID_FORM, aca.OPEN_SIGNATURE].includes(this.props.action)

      if (checkinSignature) {
        this.props.openCovidForm();
        return true;
      } else if (inThreeScreens) {
        this.props.openClassDetailScreen();
        return true;
      }
    }

    this.backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backHandleFunc
    );
  }

but once I do,

    this.backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backHandleFunc.bind(this)
    );

it will work. Why is that? The environment is react native vs code expo debugger. Thank you in advance. I also attach the debugger information.

Outside

Inside

Debug Info

Log

Does this answer your question? [Arrow Functions and This](https://stackoverflow.com/questions/28798330/arrow-functions-and-this) — shim-kun, Jun 15 '20 at 18:33
Are you asking about the behavior of the code when it executes, or about the debugger? — , Jun 15 '20 at 18:36
I'm asking why those two 'this's are different. In my understanding, js arrow function takes its 'this' from its lexical scope, in this case componentDidMount. @slappy — Daniel Li, Jun 15 '20 at 18:44
They shouldn't be different. Arrow functions have no `this` binding of its own, so it will always get it from the outer environment, as you described. So I'm asking if your question is based on running the code, or based on messages from the debugger. — , Jun 15 '20 at 18:46
I wonder if the framework you're using binds its own function in `addEventListener`, which then invokes yours with its own `this`. — , Jun 15 '20 at 18:52
@slappy Thank you for your clarification. I'm asking this question based on messages from the debugger. I also run the code. When I run the code without debugging, it will also crash. It will not crash if I bind it like I mentioned. — Daniel Li, Jun 15 '20 at 18:53
console.log(this) in the handler and see what `this` is bound to — user120242, Jun 15 '20 at 18:57
I wonder if you've got some funky transpilation or minification going on here. It looks like your original code is translated to something incorrect. — Jacob, Jun 15 '20 at 18:57
`backHandlFunc.bind(this)` shouldn't make any difference. An arrow function is automatically bound to the local `this`. That's something you normally only need to do with a traditional function. — Barmar, Jun 15 '20 at 18:58
When you say it "crashes," what exact error messages are you getting? — Jacob, Jun 15 '20 at 19:00
@Barmar: Nitpick, but it isn't bound to any `this`. It's only bound to its outer lexical environment, so it needs to look it up in the same way that it would look up any outer variable. — , Jun 15 '20 at 19:00
@Barmar: A little bit. If you think of it as a binding, then it enforces the idea that you should be able to use `.bind()` on it. Whereas if you think of it as being actually a prohibited in the function, which it is, then it's very clear that its value can only come from lexical traversal. — , Jun 15 '20 at 19:05
@slappy I just think of it as "arrow functions can't have their this-binding changed". Doesn't matter to me what the underlying mechanism is. — Barmar, Jun 15 '20 at 19:07
Thank you all. It is crashing for different reason. It is resolved now. Really Appreciate it. — Daniel Li, Jun 15 '20 at 19:12
The debugger is showing incorrect message, which leads me thinking it is a different 'this' object. — Daniel Li, Jun 15 '20 at 19:13
@Barmar: But it doesn't have a `this` binding. JS is already enough of a mess of a language. IMO, the more accurate the fundamental comprehension, the better. — , Jun 15 '20 at 19:13
@DanielLi can you post some details as an answer? Or the primary things that allowed you to identify the real erro? Or provide it so someone can take it and make a good answer that covers both the problems with `this` as well as why the error was reporting something misleading. This will make this thread more useful, because people with the same errors will know where in their code to look to unravel similarly misleading errors in their code when searching. — user120242, Jun 15 '20 at 20:06

score 0 · Accepted Answer · answered Jun 15 '20 at 21:12

So the issue is that React Native Tools extension in Visual Studio Code gives me incorrect 'this' information when I am debugging in Expo(nent). The actual 'this' in arrow function matches the 'this' in its enclosing lexical scope as expected. I find the error with this debugging software when I do console log, which gives me the correct information of 'this' in the arrow function. The crashing is logic error, and has nothing to do with the arrow function.

Javascript arrow function not getting 'this' in its enclosing function (React Native)

1 Answers1