Javascript. Get reference on outer object from immediate call function

Question

I've wanted to optimize project but faced with problem. I don't know how resolve this problem. I want to use immediate call functoins which initialize IS_LOCALHOST property and CONTEXT_PATH, but I can't get access to isLocalhost() function and constant properties (like port number). I try to put this as a parameter immediate call function but it references on document also I try to save refence like self: this and use this.self like peremeter and even util. I don't understand how I can resolve this problem. Please, help me to understand working solution.

var util = {

            WAR_FILE_NAME : 'app-name/',
            DEFAULT_TOMCAT_PORT : 8080,
            DEFAULT_SECURE_TOMCAT_PORT : 8443,

            /*** Pre construct block ***/
            IS_LOCALHOST : ( function () {
                var isLocalhost = false, hostWithPort = location.host;
                if ( hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1 ) {
                    isLocalhost = true;
                }
                return isLocalhost;
            }() ),

            isLocalhost : function (){
                return this.IS_LOCALHOST;
            },

            CONTEXT_PATH : ( function (utilModule) {
                return location.hostname + ( location.port ? ':' + utilModule.DEFAULT_TOMCAT_PORT : '' ) + '/' + ( utilModule.isLocalhost() ? utilModule.WAR_FILE_NAME : '' );
            }(util) ),

            SECURE_CONTEXT_PATH : ( function (utilModule) {
                return location.hostname + ( location.port ? ':' + utilModule.DEFAULT_SECURE_TOMCAT_PORT : '' ) + '/' + ( utilModule.isLocalhost() ? utilModule.WAR_FILE_NAME : '' );
            }(util) )
    }

Possible duplicate of [Self-references in object literal declarations](http://stackoverflow.com/q/4616202/1048572) — Bergi, Sep 01 '14 at 15:45

score 1 · Accepted Answer · answered Sep 01 '14 at 15:32

I'm not sure why you need to make these as IIFEs.

Why not make them normal functions as in the first example below, or simply set the properties at the appropriate time as in the second example?

Example 1 -- normal functions

var util = {

    WAR_FILE_NAME: 'app-name/',
    DEFAULT_TOMCAT_PORT: 8080,
    DEFAULT_SECURE_TOMCAT_PORT: 8443,

    /*** Pre construct block ***/
    IS_LOCALHOST: (function() {
        var isLocalhost = false,
            hostWithPort = location.host;
        if (hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1) {
            isLocalhost = true;
        }
        return isLocalhost;
    }()),

    isLocalhost: function() {
        return util.IS_LOCALHOST;
    },

    CONTEXT_PATH: function() {
        return location.hostname + (location.port ? ':' + util.DEFAULT_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
    },

    SECURE_CONTEXT_PATH: function() {
        return location.hostname + (location.port ? ':' + util.DEFAULT_SECURE_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
    }
};

Example 2 -- set properties afterwards using the IIFEs

var util = {

    WAR_FILE_NAME: 'app-name/',
    DEFAULT_TOMCAT_PORT: 8080,
    DEFAULT_SECURE_TOMCAT_PORT: 8443,

    /*** Pre construct block ***/
    IS_LOCALHOST: (function() {
        var isLocalhost = false,
            hostWithPort = location.host;
        if (hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1) {
            isLocalhost = true;
        }
        return isLocalhost;
    }()),

    isLocalhost: function() {
        return util.IS_LOCALHOST;
    }
};

util.CONTEXT_PATH = (function() {
    return location.hostname + (location.port ? ':' + util.DEFAULT_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
})();

util.SECURE_CONTEXT_PATH = (function() {
    return location.hostname + (location.port ? ':' + util.DEFAULT_SECURE_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
})();

score 1 · Answer 2 · answered Sep 01 '14 at 15:40

Don't create your object like this:

var util = {
    foo: bar,
    blah: stuff

etc. This is verbose and cumbersome. Instead, wrap it in a IIFE and put all initialization logic in this function:

var util = (function() {
   var t = {};
   t.foo = bar;
   t.blah = stuff;
   return t;
})();

For example:

var util = (function() {

    var t = {};

    t.WAR_FILE_NAME =  'app-name/';
    t.DEFAULT_TOMCAT_PORT = 8080;
    t.DEFAULT_SECURE_TOMCAT_PORT = 8443;

    t.IS_LOCALHOST = false;
    var hostWithPort = location.host;
    if ( hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1 ) {
        t.IS_LOCALHOST = true;
    }

    t.CONTEXT_PATH = location.hostname
        + (location.port ? '=' + t.DEFAULT_TOMCAT_PORT : '')
        + '/'
        + ( t.IS_LOCALHOST ? t.WAR_FILE_NAME : '' );

    t.SECURE_CONTEXT_PATH = location.hostname
        + (location.port ? '=' + t.DEFAULT_SECURE_TOMCAT_PORT : '' )
        + '/'
        + ( t.IS_LOCALHOST ? t.WAR_FILE_NAME : '');

    return t;

})();

I used as example this tutorial https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/jquery/js/app.js and considered it as a sample — Ray, Sep 02 '14 at 07:37
@Ray: all tutorials are good, but some are less good than others ;) — georg, Sep 02 '14 at 10:40
@george Definitely! Could you please give me a reference to a good jquery MVC tutorial? — Ray, Sep 02 '14 at 11:31

Javascript. Get reference on outer object from immediate call function

2 Answers2

Example 1 -- normal functions

Example 2 -- set properties afterwards using the IIFEs