Protect the global reference in javascript

Question

The following javascript code, allows you to access the global object (window/worker).

(new function Outer(){
    console.log(this); /* The object */
    (function(){ // This function could be a 3rd Party function 
        console.log(this); /* window !!*/
    })();
});

Is there a way by which I can ensure that the inner this always gets a reference to Outer's context.

I know i can do

(new function Outer(){
    'use strict';
    console.log(this); /* The object */
    (function(){ // This function could be a 3rd Party function 
        console.log(this); /* undefined ? !!*/
    })();
});

but that results in this being undefined.

Edit

I know about bind, but what if the inner function is nested. for instance something like

(function(){

    (function(){
        (function(){
           console.log(this);// undefined
        })();

    })();

}).bind(this)();

What i want is : Outer {} and not a reference to the outer using a variable :-|

So you don't want window, but you also don't want undefined. Hate to break it to you, but those are the two defaults that will be used for functions that are invoked without any other indicator of the this value. — Blue Skies
– Blue Skies, Commented Nov 25, 2013 at 21:29
Thats why i asked, wondering if there exists a trick to not have either.. But i guess i will have to be satisfied with undefined — ShrekOverflow
– ShrekOverflow, Commented Nov 25, 2013 at 21:33
Nope, no trick. I'm not sure what the value would be if it wasn't either of those. ECMAScript 6 will have functions with a lexical this, but that's of little use today, and it's only for functions with the new syntax. — Blue Skies
– Blue Skies, Commented Nov 25, 2013 at 21:34

PSL · Accepted Answer · 2013-11-25 21:59:54Z

7

You can use function.call.

new function Outer(){
    'use strict';
    console.log(this); 
    (function(){ // This function could be a 3rd Party function 
        console.log(this);  //<-- Now it will it the one from the outer scope
    }).call(this);
}; // You don't need to invoke this explicitly here with () since you are invoking it already with new keyword so constructor invocation doesnt need ()

Or a best bet would be to cache the context outside and use it anywhere in the inner scope.

new function Outer(){
        'use strict';
        var self = this;
        console.log(this); 
        (function(){ // This function could be a 3rd Party function 
            console.log(self);  //<-- Now it will it the one from the outer scope
        })();
 };

edited Nov 25, 2013 at 21:59

answered Nov 25, 2013 at 21:20

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

ShrekOverflow Over a year ago

What if the inner function is nested a few level in ?

Sean Vieira Over a year ago

I think you meant .bind(this)(), but +1 for doing the right thing. (Also you could use .call(this) and have it work way back :-)

apsillers Over a year ago

@AbhishekHingnikar The other solution is to store a reference to the outer this inside another variable, like var that = this and then use that to refer to the outer this variable. However, that requires you to edit the code of the inner function.

PSL Over a year ago

@SeanVieira yeah i meant call... :) Good catch

Blue Skies Over a year ago

I know it was from the code in the question, but the final trailing () shouldn't be there since the Outer function is invoked with new. You can also get rid of the wrapping ().Just new function Outer() {...}; is enough.

|

seand · Accepted Answer · 2013-11-25 21:24:03Z

1

You can use a closure variable:

(new function Outer(){
    'use strict';
    console.log(this);
    var me = this;
    (function(){
        console.log(me);
    })();
})();

answered Nov 25, 2013 at 21:24

seand

4787 silver badges24 bronze badges

Comments

Fenton · Accepted Answer · 2013-11-25 21:25:14Z

1

This trick simply stores the "outer" this inside a variable that you can access from inner functions (and inner-inner function and so on).

In some cases, this can be useful because you have access to both the inner this (if there is a context for it) and the outer this.

(new function Outer(){
    'use strict';
    console.log(this); /* The object */
    var _this = this;
    (function(){ // This function could be a 3rd Party function 
        console.log(_this); /* The outer object */
    })();
})();

answered Nov 25, 2013 at 21:25

Fenton

253k74 gold badges404 silver badges414 bronze badges

Collectives™ on Stack Overflow

Protect the global reference in javascript

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related