#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Location
    US
    Posts
    105
    Rep Power
    57

    JS/jQuery IIFE Namespace


    Coming from OOP languages, JS has always been artificially hokey to me and difficult to grasp. One thing I'm still a bit clueless on is the IIFE and possibly the namespace behavior.
    For instance why does this code not work?
    Code:
    (function ($){
        $.CustomObj = (function(){
            this.requiredProperties = {"name":"text","options":"array","abilities":"array"};
            this.name = "default";
            this.options = [/** .. **/];
            this.abilities = [/** .. **/];
            
            this.getOptions(){return this.options;}
            this.getProperty = function(name){
                return this[name];
            }
        })();
    }(jQuery));
    
    $.CustomObj.getProperty("name");
    but if I remove the "(" and ")()" from CustomObj I can instantiate this as:
    Code:
    var co = new $.CustomObj();
    co.getProperty("name");
    Can someone explain? Or link me to a resource which does?
  2. #2
  3. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,052
    Rep Power
    9616
    Doing
    Code:
    (function() { ... })()
    will execute the function immediately. You don't want that. You just want the function - the execution happens later when you use "new" to construct the object.

    For a resource you could start with the MDN.
    Last edited by requinix; January 8th, 2017 at 09:10 AM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Location
    US
    Posts
    105
    Rep Power
    57
    Thanks. I now understand though the function is being used as a class it is still a function. So using
    Code:
    return this;
    in the self executing syntax, in effect treats this as a single instance, or singleton?
    At least if it's not cloned ie:
    Code:
    $.dare = $.extend(true,{},$.CustomObj);
    Appreciate the link. I have browsed through MDN before but absorb with jQuery and open source frameworks/libs. I feel like this method leaves me with random blind spots instead of treating it more sequentially.
  6. #4
  7. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,052
    Rep Power
    9616
    Okay, so, prototyping makes this all a little bit more complicated, but basically

    Using "new" to create an object
    Code:
    $.CustomObj = function() {
    	this.name = "default";
    };
    var obj = new $.CustomObj();
    is syntactic sugar for writing something like
    Code:
    $.CustomObj = function() {
    	var this = {}; // actually would be a copy of the prototype
    	(function() {
    		this.name = "default";
    	})();
    	return this;
    };
    var obj = $.CustomObj();
    As with other languages, "this" is a special variable for the current instance; if you want a singleton then you'd use a regular function to retrieve the same instance of a thing, like
    Code:
    $.CustomObjSingleton = (function() {
    	var instance = new $.CustomObj();
    	return function() { return instance; };
    })();
    var obj1 = $.CustomObjSingleton();
    var obj2 = $.CustomObjSingleton();
    // obj1 === obj2
    The way "this" behaves is the same as other languages - what's different in Javascript is that it uses prototyping for new objects.

IMN logo majestic logo threadwatch logo seochat tools logo