How to call class this in object?

Question

I have a class testClass and in testClass there is a getter called testGetter and a public object called testObject. In testObject I have a function nestedFunction which attempts to call testGetter but cannot as the scope for this is in the testObject. How could I call the getter (or any function) from the object?

class testClass {
    get testGetter() {
        return "test"
    }

    testObject = {
        nestedFunction : function(){
            console.log(this)
            return this.testGetter
        }
    }

    constructor()
    {
        console.log(this.testObject.nestedFunction())
    }
}
new testClass()

Output:

{ nestedFunction: [Function: nestedFunction] }
undefined

Why are you not using a class for that testObject, too? As for why `this` is undefined: because that object is "just an object literal with a function properly", not an instance of an object type that you created using `new ...` - but most importantly: what is the _real_ reason you're writing this code? Because you're almost certainly solving a problem you're having with somewhat questionable code if this is the code you actually intend to use, and folks on SO can definitely help you figure out what the _right_ code would look like. — Mike 'Pomax' Kamermans, May 12 '21 at 21:59
@Mike'Pomax'Kamermans He wants it to be the `testClass` object it's contained in. — Barmar, May 12 '21 at 22:00
@Mike'Pomax'Kamermans thanks for the response, I'll be completely honest, I had no idea you could do that. Could you link some documentation or another Stack Overflow question on that? — Nico Nekoru, May 12 '21 at 22:00
I can't, because that's just basic JS class code: `class testClass { constructor() { this.testObject = new WhateverClassThatShouldBe(); }`. Also, note that `get testGetter()` is misunderstanding how `get` works: it creates a function that can be called _as a property_ (so that would be `const t = new TestClass(); const x = t.testGetter` in this case). You don't add `get` if you're simply defining a class function that you want to actually call _as_ a function. — Mike 'Pomax' Kamermans, May 12 '21 at 22:02
Ah, I see what you mean, I hadn't thought about that! Also about the get thing, I understand that about `get` but it throws an error if I remove the parens in the definition — Nico Nekoru, May 12 '21 at 22:03
@Mike'Pomax'Kamermans He's not calling `testGetter` as a function: `return this.testGetter` — Barmar, May 12 '21 at 22:04
Right, in which case the name needs to be updated, because `testGetter` is a function role name, when it should just be a property name that reflects "the thing we're getting". — Mike 'Pomax' Kamermans, May 12 '21 at 22:05
@Mike'Pomax'Kamermans Oh thats what you meant, I think I understand. Yes, since the return value of this example is static I would use a property but this is only an example I was using whereas my actual code will be dynamic. — Nico Nekoru, May 12 '21 at 22:07

score 0 · Accepted Answer · answered May 12 '21 at 21:58

0

Classic use case of arrow functions.

class testClass {
  get testGetter() {
    return "test"
  }

  testObject = {
    nestedFunction: () => {
      console.log(this)
      return this.testGetter
    }
  }

  constructor() {
    console.log(this.testObject.nestedFunction())
  }
}
new testClass()

answered May 12 '21 at 21:58

Lakshya

684
6
10

Hi Lakshya, thanks for the swift answer. Could you provide an explanation on why closures work in this scenario rather than classic functions? I don't understand why this works, I will accept it if you provide a little more insight – Nico Nekoru May 12 '21 at 22:02
1

@NicoNekoru Read https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable – Barmar May 12 '21 at 22:02
1

TLDR; Arrow functions capture `this`, traditional functions don't. – Barmar May 12 '21 at 22:03
@Barmar Thank you for the link and concise explanation! – Nico Nekoru May 12 '21 at 22:04
1

normal functions execute in their own context so they have their own 'this' whereas arrow functions take the scope of their outer function (in this case, the testClass). Check this out for detailed differences between the two: https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/ – Lakshya May 12 '21 at 22:06

How to call class this in object?

1 Answers1