Returning a function and using this keyword in Javascript

Question

I am new to JavaScript and am trying to understand the working of the famous this keyword. I have the following code -

class A {
    variableA = 1;
    function aFunc(){
        return function B(){
            // Use variableA and variableC here
        }
    }
}

class C {
    variableC=2;
    cFunc;
}

function updateC() {
    let a = new A();
    let c = new C();
    c.cFunc = a.aFunc();
    c.cFunc();
}

One possible solution is to store A's this in some other variable. Is there a better way to handle this case?

You can [bind the context](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) or simply use an arrow function. I'm not really sure what your goal is - what do you mean by "use A's this and B's this"? — VLAZ, Jul 16 '20 at 13:06
Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Liam, Jul 16 '20 at 13:07
_use A's this and B's this_ - `this` can't refer to both A and B at the same time — Yousaf, Jul 16 '20 at 13:07
What's not good enough about `var save = this;` before the `return`? — Pointy, Jul 16 '20 at 13:08
`A` is a class, while `B` is a function. And to say that either "has" a `this` needs further qualification. In no way does a class ever "have" a `this`, but an instance of a class *is* a `this`! A function does not *have* a `this`, but rather can be called in the context of a `this` (essentially as if `this` was a parameter!) — Gershy, Jul 16 '20 at 13:09
@Pointy that would work but I suspect OP might be describing [an XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — VLAZ, Jul 16 '20 at 13:10
Hi guys, I have updated the question to better explain my usecase. Please let me know if you still have any doubts. — Govinda Totla, Jul 16 '20 at 13:26
If you just need `variableA` and `variableC` there is no need to go through `this` - you can directly pass them to `B` to use. Moreover, you don't even need the method in `A` for that. The use case makes it seem like `B()` isn't really reliant on `A` or `C`, so it can live outside and be seeded with the data needed. — VLAZ, Jul 16 '20 at 13:37
I tried to explain it in a simple way. Actually, I can not pass the variable to B due to some reasons and that is why I am facing all this issue. — Govinda Totla, Jul 16 '20 at 13:38
`(function B(varA) { /* varA is now usable here */ return function() { /* and here */ } })(this.variableA)` ? — VLAZ, Jul 16 '20 at 13:46

intekhab · Answer 1 · 2020-07-16T13:19:47.543

1

Try this

class A {
    constructor() {
        var A_this = this;
        A_this.data = 'Class A';
        this.someFunc = function someFunc(){
            return function B(){
                var B_this = this;
                 // use A's this  A_this
                 //and B's this  B_this
                B_this.data = 'Function B';
                 
            }
        }
    }
}
var a = new A;
var b = a.someFunc()
var bObj = new b();
console.log(a.data, bObj.data);//Class A Function B

You can check this how to do `var self = this` inside es6 class? . My own question asked almost 4, 5 years back

edited Jul 16 '20 at 13:19

answered Jul 16 '20 at 13:13

intekhab

1,544
1
13
18

I wouldn't do it in the constructor. Admittedly, the performance aspect shouldn't be a huge factor but this will bind all methods to each instance, instead of leaving them on the prototype. A more practical concern might be that it makes the code rather hard to read when every single thing is stuffed in the constructor. – VLAZ Jul 16 '20 at 13:17
@VLAZ, utterly agreed with you. This is just to show that how we can do it for the given case. Also I have given one link which has more insight. – intekhab Jul 16 '20 at 13:23
Hey @intekhab I thought of that but assigning this keyword gives linting error. So I asked the question to know if there is a better way to handle this. – Govinda Totla Jul 16 '20 at 13:27

Returning a function and using this keyword in Javascript

1 Answers1