Accessing outer scope from inner scope

Question

I have a type that looks a little something like this:

var x = function(){
    this.y = function(){

    }

    this.z = function(){
        ...
        this.A = function(){
            CALLING POINT
        }
    }
}

From calling point, I'm attempting to call function this.y. I don't need to pass any parameters, but when I set some stuff from this.A, I need to call this.y.

Is this possible? I'm OK with passing extra parameters to functions to make it possible.

@T.J.Crowder Could you clarify how this isn't a duplicate of [How to access the correct `this` / context inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) They look the same to me: accessing a property on `this` from an outer function scope. — apsillers, Mar 08 '16 at 21:58
@apsillers: I thought the code there was sufficiently different it would be unclear to the OP how those answers addressed this setup. — T.J. Crowder, Mar 09 '16 at 06:28

score 11 · Accepted Answer · edited Sep 24 '19 at 16:15

11

Is this possible?

Yes, you can assign this reference to another variable and then call function y on it

this.z = function() {
    var self = this;
    this.A = function() {
        self.y();
    }
}

edited Sep 24 '19 at 16:15

Minding

1,383
1
17
29

answered Mar 08 '16 at 21:46

isvforall

8,768
6
35
50

Nina Scholz · Answer 2 · 2016-03-08T22:18:18.043

Version with bind, basically this adds a new method a to the object.

var X = function () {
    this.y = function () {
        document.write('y<br>');
    }

    this.z = function () {
        document.write('z<br>');
        this.a = function () {
            document.write('a<br>');
            this.y();
        }
    }.bind(this);
};

var x = new X;
//x.a(); // does not exist
x.z();   // z
x.a();   // a y

Working example with saved inner this.

var X = function () {
    var that = this; // <--

    this.y = function () {
        document.write('y<br>');
    }

    this.Z = function () {
        document.write('Z<br>');
        this.a = function () {
            document.write('a<br>');
            that.y();
        }
    }
}

var x = new X,
    z = new x.Z; // Z

z.a(); // a y

score 1 · Answer 3 · answered Oct 05 '21 at 22:15

1

Instead of function() you can try modern JavaScript or Typescript ()=>. I also like .bind(this).

answered Oct 05 '21 at 22:15

Michael Biermann

3,105
27
23

score -1 · Answer 4 · answered Mar 08 '16 at 21:52

You cannot because this.y() is not within the scope that this.A() is in. You can if you set this.y() to a global function y:

var y = function() {};
var x = function() {
    this.y = y;
    this.z = function() {
       ...
       this.A = function() {
           this.y(); // will be successful in executing because this.y is set to the y function.
       };
    }
};

Accessing outer scope from inner scope

4 Answers4

Linked