Why does Typescript arrow function property has access to this

Question

I am trying to understand the scope of arrow functions. I implemented a small program in Angular, but I got confused a bit. In the code below I don't really understand why this binds to the TestComponent

export class TestComponent {
 a: string = "Hello World";
 myArrowFunction = () => {
  console.log(this.a); //
 }
 constructor(){
  myArrowFunction(); //output: "Hello World"
 }
}

Arrow functions don't have its own this, so the this binds to the parent, is that right? myArrowFunction belongs to TestComponent, so this in myArrowFunction should be undefined, but in the example above this binds to TestComponent why?

    test = {
        b: "Hello World",
        foo: () => {
            console.log(this.b);
        }
    }
        
    test.foo(); //output: undefined

Where is the difference to the javascript code above? There this.b is undefined.

Some useful refs: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). [Medium Post](https://medium.com/@iampika/es6-arrow-functions-syntax-and-lexical-scoping-d061732071e7) — Rajesh, Jul 23 '20 at 10:09
`this.myArrowFunction = () => {...}` is assigned inside the `constructor()` — Thomas, Jul 23 '20 at 10:09
`test = { b: "Hello World", foo: () => { console.log(this.b); } } test.foo();` Isn't this the same? — Yusuf Ipek, Jul 23 '20 at 10:38
@YusufIpek I mean you take a property or a variable and assign it a new value. In this case this value is a function. — Thomas, Jul 23 '20 at 12:53

8HoLoN · Accepted Answer · 2020-07-23T10:58:04.907

1

This is normal, because of the arrow function this refers to the upper object so your instance.


//console.log(this)
class TestComponent {
    myArrowFunction = () => {// function set in instance
        console.log(this); //
    }
    myFunction() {// function set in prototype
        console.log(this); //
    }
    constructor() {
        this.a = "Hello World";
        this.myArrowFunction(); //output: "Hello World"
    }
}

function A() {
    this.foo = () => { console.log(this) };// A instance
    this.foo()
}
A.prototype.bar = () => { console.log(this) };// global
new A();
//const a = new TestComponent();

edited Jul 23 '20 at 10:58

answered Jul 23 '20 at 10:06

8HoLoN

1,122
5
14

Why is the upper object TestComponent? – Yusuf Ipek Jul 23 '20 at 10:36
because look at the equivalence with prototype notation in my example – 8HoLoN Jul 23 '20 at 10:58
I understand your example, however what about Objects created with {}, like my second code example in the description? Could you please explain me that? – Yusuf Ipek Jul 23 '20 at 12:12
in your last example with {} there is no function scope so this is the global variable (could you accept the answser) – 8HoLoN Jul 23 '20 at 12:15
One last question. But if I would replace the arrow function in the example with a regular function, then access to this.b would work, what is the reason for that? – Yusuf Ipek Jul 23 '20 at 12:19
because arrow function has no function scope behavior, function does. – 8HoLoN Jul 23 '20 at 12:20

Why does Typescript arrow function property has access to this

1 Answers1