1

I am learning the behavior of this keyword in ES6 class , before I have learnt that this keyword in object functions, represent the following :

  • In regular function, this represents the the current object.
  • In arrow function, this represent the global object(window).

So, when I worked with ES6 class I see that Class behave as Object when it is complied into JavaScript ,I see this behavior in console by putting this in a class method and this was representing the current class as Object as well as its prototype was Object.

For conceptual understanding, I make one Arrow function foo() and one Regular function bar() in a class AppComponent and print this keyword as follow:

enter image description here

I was expecting that this in foo() would represent global object(window) , because it is inside Arrow function in the Object and ,on the other side,in the bar() this represent the current object due to Regular function inside object which is AppComponent, but the output was:

enter image description here

bar() output is expected.

foo() output is unexpected.

So, my question is that why this represent the current Object Appcomnent rather than global object(window), because it is inside the arrow function in the object .

Please correct me if my concept is not correct in the question ,if it is correct then why I see the unexpected output. I would very thankful to you for your contribution.

Ubaid
  • 77
  • 10
  • 2
    Welcome to Stack Overflow! Please post code, error messages, markup, and other textual information **as text**, not as a *picture* of text. Why: http://meta.stackoverflow.com/q/285551/157247 – T.J. Crowder May 18 '22 at 15:45
  • Please don't post your code as images; **code is text**. In the future, please include your code as properly formatted text. – Tim Lewis May 18 '22 at 15:46
  • 3
    *In arrow function, this represent the global object(window).* — No, it doesn't. `this` is lexical (inherited from the environment where the function is defined). It's only `window` if the value of `this` is `window` when it is defined … and you're asking about public class fields, which are different. – Quentin May 18 '22 at 15:47
  • 1
    *"In arrow function, this represent the global object(window)"* That's incorrect. `this` inside an arrow function is whatever `this` is outside it, which may be the global object, or may be something else. In your case, `this` in your `foo` is a reference to the object being constructed, exactly as though you'd written `this.foo = () => { /*...*? };` in the constructor, because `this` within a `class` construct's class fields initializer is a reference to the object being constructed. That's how class fields are defined. – T.J. Crowder May 18 '22 at 15:48
  • it means, inside a class "this" will always represent the class as object in arrow or regular function? – Ubaid May 18 '22 at 15:53
  • 1
    @FZs - That's not correct, see [my comment above](https://stackoverflow.com/questions/72292221/why-this-keyword-in-arrow-function-represents-the-object-rather-than-global-ob?noredirect=1#comment127717677_72292221). Functions aren't the only way the value of `this` is set (just the primary way, outside of modules where it's set to `undefined`). – T.J. Crowder May 18 '22 at 15:54
  • 1
    @Ubaid - Not always, but it will within an initializer of an instance field like your `foo`. Inside a method, it'll be whatever `this` is in the method call, which depends on how the method was called. Inside an initializer on a `static` class field, it'll be a reference to the class constructor function. – T.J. Crowder May 18 '22 at 15:54
  • it means the scope of this inside a class would change depending upon where and how we are using it ? – Ubaid May 18 '22 at 16:00
  • 1
    @Ubaid - No. First off, `this` isn't scope. But the *value* of `this` doesn't depend on where the class is defined, it depends on where *within* the class `this` is used. Again, in an instance field initializer, it'll be the instance being created (as though the code were in the constructor). In a static field initializer, it'll be the class constructor function. In a method, it'll be whatever it is in that method, which depends on how the method is called. None of that varies depending on where the class is defined. – T.J. Crowder May 18 '22 at 16:03
  • @T.J.Crowder ,thank you for correcting me ,i should say value instead of scope and thanks for your explanation – Ubaid May 18 '22 at 16:06

0 Answers0