Javascript module pattern scope with this

Question

I was developing using module pattern, and was wondering why I can't acces to the module scope using this. Maybe I'm wrong with the understanding of the revealing module pattern.

Here is the code I use :

var BLOG = window.BLOG || {};

BLOG.Module = (function(){

    var 
        _this = this,
        _hasLoaded = false;


    function init(){
        console.log(_this); // Logs the Window object

    }


    function _privateMethod(){
        $.ajax({
            url: 'lazyload/lazyload.html',
            success : function( data ){
                // _hasLoaded = true; // I want to access the variable in my module, How do I refer to it? 
            }

        });
    }


    return {
        init : init
    };

})();

What is it you want to refer to with this? Can you give an example? — T.J. Crowder
– T.J. Crowder, Commented Oct 16, 2013 at 13:40
I've added what I wanted to do, in the ajax success, I want to access the _hasLoaded variable and set it to true. — arlg
– arlg, Commented Oct 16, 2013 at 13:59
@ arlg: You just use _hasLoaded = true; _privateMethod and your ajax success handlers are both closures over that variable. I've updated my answer with details and what may be a useful link. — T.J. Crowder
– T.J. Crowder, Commented Oct 16, 2013 at 14:02

T.J. Crowder · Accepted Answer · 2013-10-16 14:04:17Z

3

this is determined by how a function is called. If it's called directly, not through an object property (as your outer scoping function is), within that call this will be the global object in loose mode (undefined in strict mode). On browsers, that's the window object.

You wouldn't normally use this to try to refer to things within that outermost scoping function (for this reason).

If something did this:

BLOG.Module.init();

...then within the call to init, this (not _this) would refer to Module and you could refer to other properties on the object you create at the end of your outermost scoping function (there aren't any others currently, just init).

Re your edit:

var 
    _this = this,
    _hasLoaded = false;

// ...

function _privateMethod(){
    $.ajax({
        url: 'lazyload/lazyload.html',
        success : function( data ){
            // _hasLoaded = true; // I want to access the variable in my module, How do I refer to it? 
        }

    });
}

Just uncomment that line:

_hasLoaded = true;

This is because both _privateMethod and any ajax success handlers created as a result of calling _privateMethod are closures over the variables defined within your outermost scoping function. So you just refer to them directly.

If this use of the word "closure" is unfamiliar, don't worry, closures are not complicated.

Side note: This is an odd construct:

var BLOG = window.BLOG || {};

...as it mixes code requiring that it be at global scope with code that doesn't require that it be at global scope. It's entirely functional, it's just a bit odd. I'd probably go one way or the other:

// Requires that it's at global scope (and yes, this does work)
var BLOG = BLOG || {};

or

// Creates a global whether it's at global scope or not
window.BLOG = window.BLOG || {};

edited Oct 16, 2013 at 14:04

answered Oct 16, 2013 at 13:40

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

5 Comments

arlg Over a year ago

Thanks, for your answer, When I console.log(this) on init, I get the init function, but not the Module

T.J. Crowder Over a year ago

@arlg: Again, it depends on how you call it. If you call BLOG.Module.init(), within init, this will be BLOG.Module (the object you're returning from your scoping function).

T.J. Crowder Over a year ago

@arlg: It would really help if you answered the question I asked you almost as soon as you posted the question (see the comment under the question).

arlg Over a year ago

Thanks, I am ashamed with that question, I think I over complicated the problem or messed up with my variables names. Anyway, thanks for your time and your links, I will read this.

T.J. Crowder Over a year ago

@arlg: :-) No worries, glad that helped! Best,

Collectives™ on Stack Overflow

Javascript module pattern scope with this

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related