What is the value of "this" inside an arrow function that is defined inside a class

Question

Newbish question but I was wondering what the value of "this" would be for an arrow function that is defined inside a javascript class.

Is it a reference to the class enclosing it?

For eg:

class abc {
    testFunction = () => {
        //What is the value of 'this' here?
    }
}

Trying to understand this better to understand how functions are passed to components in ReactJS.

@Bergi: Yeah, only in static methods (if they're called via `ClassName.methodName`). — T.J. Crowder, Feb 22 '18 at 07:14

T.J. Crowder · Accepted Answer · 2018-02-22T07:29:40.027

1

You've tagged your question "ES6" (which is to say, ES2015) and such, but note that class fields (the syntax you're using) isn't in ES2015 — or ES2016, or ES2017, and won't be in ES2018. It's still a Stage 3 proposal, despite being in widespread use in the React community via transpilation.

With that proposal, this for the field initializers is the same as it would be in the constructor: A reference to the newly-constructed instance. That code is equivalent to:

class abc {
    constructor() {
        this.testFunction = () => {
            // ...
        };
    }
}

edited Feb 22 '18 at 07:29

answered Feb 22 '18 at 07:08

T.J. Crowder

1,031,962
187
1,923
1,875

Great answer!!! – Evert Feb 22 '18 at 07:13
@T.J. Crowder Thanks for clarifying. Sorry I wasnt aware that this isnt part of ES6. I assumed that this was the case since it involves arrow functions and classes. My bad. And Thanks a lot! – Craig Feb 22 '18 at 07:13
@T.J. Crowder: Also just to clarify, with the new proposal 'this' will then be a reference to the class? – Craig Feb 22 '18 at 07:26
@Craig: The newly-constructed *instance*, not the class. (I've updated the answer.) – T.J. Crowder Feb 22 '18 at 07:29
@T.J. Crowder: Oh great, understood it now. Thanks. – Craig Feb 22 '18 at 07:31

score 0 · Answer 2 · answered Feb 22 '18 at 07:08

In this case, the this keyword is just an instance of abc. For example:

var alphabet = new abc();
alphabet.testFunction();

class abc {
testFunction = () => {
    this.x = 30; // is the same as:
alphabet.x = 30;
}

Hope this helps! For more info on the this keyword, go to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

What is the value of "this" inside an arrow function that is defined inside a class

2 Answers2

Linked

Related