1

I know that arrow functions don't have their own "this" keyword, and "this" will point to parent (if it has it). Can someone please explain why "this" in class points to class and why "this" in object points to global window? So question is about differences between class and object here.

In class:

class App {
  getPosition = () => {
    //this points to class App
  };

  getPosition2(){
    //this undefined
  }
}

Object:

const obj = {
  someFunction: () => {
    //this points to global window
  }

  someFunction2(){
    //this points to object
  }
};
randomCoder
  • 23
  • 3
  • Please don't delete the question, I want to post a comment with a thorough explanation, not just close the question with a dupe. :-) – T.J. Crowder Mar 23 '21 at 16:49
  • 1
    `this` will only be `undefined` in `getPosition2` if you call it in a way that doesn't set `this` to something (details in [this question's answers](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback)). But an arrow function like `getPosition` *closes over* the `this` that's in place in the context where the arrow function is created, and in `class` constructs, property initializers like yours are executed exactly as though they were in the constructor, and so `this` is the instance being initialized by the constructor. In contrast, in... – T.J. Crowder Mar 23 '21 at 16:51
  • 1
    ...an object initializer, there's no new scope and `this` is just what it was in the context where the object initializer appears. That's the key difference between your examples. – T.J. Crowder Mar 23 '21 at 16:52
  • @VLAZ - What's your take, should we reopen and post an actual answer? SO leans strongly toward marking duplicates and I try to follow the rules, but I wonder if it's an overreach in this case... – T.J. Crowder Mar 23 '21 at 16:53
  • @T.J.Crowder I'm sure we have a dupe for this. We must do. I haven't found it yet. We have a lot for arrow functions and for object literals but the intersection seems very slim. – VLAZ Mar 23 '21 at 16:54
  • @VLAZ - Okay, cool. I just wanted a gut check because despite not liking closing things as dupes, I wondered if I'd overdone it this time. Thanks! – T.J. Crowder Mar 23 '21 at 16:56
  • 1
    Also related (no space in the dupes section) [Arrow Function in Object Literal](https://stackoverflow.com/q/36717376) – VLAZ Mar 23 '21 at 16:57
  • 1
    @ randomCoder - This is **not** obvious stuff, so please don't take the fact that we've marked it a duplicate as negative. We're just saying that the underlying issues have already been answered and pointing to where the answers are. This stuff is subtle and your question is perfectly reasonable. – T.J. Crowder Mar 23 '21 at 16:57
  • @T.J.Crowder we could say that `this` has always been a problem :D – VLAZ Mar 23 '21 at 16:59
  • @T.J.Crowder Thanks! So In a nutshell class has own context? Thats why it happens? :D – randomCoder Mar 23 '21 at 17:32
  • 2
    @randomCoder - In a nutshell, property initializers like your `getPosition = () => { };` (which is part of the [public fields proposal](https://github.com/tc39/proposal-class-fields)) are executed exactly as though they appeared at the beginning of the constructor (just after the call to `super()` in subclasses), and in the constructor `this` refers to the object being initialized. See also: https://pastebin.com/RmrHjnTd – T.J. Crowder Mar 23 '21 at 17:41

0 Answers0