www.webdeveloper.com
Results 1 to 8 of 8

Thread: How immediate object initialization works in JavaScript

  1. #1
    Join Date
    Apr 2010
    Posts
    26

    How immediate object initialization works in JavaScript

    Hey all, there's this line:
    Code:
    ({
     
    maxwidth: 600,
    maxheight: 400,
     
    gimmeMax: function () {
    return this.maxwidth + "x" + this.maxheight;
    },
     
    init: function () {
    console.log(this.gimmeMax());
     
    }
    }).init();
    Here we uses parenthesis to indicate we are creating an object literal (as opposed to brackets for an iterator like for or while loop). Using object literal notation, a new object is created, but one that doesn't have prototype property. However, it is given "this" property to refer to the current object. But since it doesn't explicitly return anything, it silently returns undefined behind the scenes. So how is it then we can use dot notation to call the init() method on an object that has returned undefined?

    Thanks for response.

  2. #2
    Join Date
    Aug 2009
    Posts
    593
    Looks like you've created an anonymous object, and although it doesn't return anything during its construction you still have a temporary reference to it, allowing you to access it members.

  3. #3
    Join Date
    Apr 2010
    Posts
    26
    So if you don't assign the result of object construction to a variable, but rather just define one anonymously, its own members temporarily available as long as you use dot notation to access them? Is this defined anywhere in ECMAScript? It seems a little awkward.

  4. #4
    Join Date
    Aug 2009
    Posts
    593
    I don't have any references, but from how I've understood things the object can be self sustaining. Once all references, either done internally or externally, are lost the browser will perform garbage collection to free the memory again.

  5. #5
    Join Date
    Apr 2010
    Posts
    26
    Thanks for response.

    And those external references can't be just put anywhere in execution code because that object literal defined scope, so this wouldn't work:

    Code:
    ({
    	init3 : function(){
    		console.log("Hello");
    	}
    })
    
    init3(); //throws undefined exception because it's not in scope of object literal
    But this is:

    Code:
    ({
    	init : function(){
    		console.log("Hello");
    	}
    }).init();
    Most likely it works because init is being called on the anonymous object, and because it's being called on it, this now refers to the context of that object and since it has a method "init", that method is executed. In the first example, we didn't call init() on the object and so this referred to the global scope and since no init function declaration or expression existed in the global scope, the program stops and throws exception error "undefined". The fact that the object literal returns undefined doesn't matter since the method is being called on the object literal, which has the definition of that object in local scope.
    Last edited by JohnMerlino; 01-27-2011 at 02:11 PM.

  6. #6
    Join Date
    Aug 2009
    Posts
    593
    By external I meant something like:

    Code:
    var $instance = {
    
    	init : function()
    	{
    		alert('INITIALIZING');
    	}
    
    };
    $instance.init();
    And internal:

    Code:
    ({
    
    	update : function()
    	{
    		document.title = Math.random();
    	},
    
    	init : function()
    	{
    		var $self = this;
    		setInterval(function(){$self.update();}, 500);
    	}
    
    }).init();
    Your example where you call init3(); correctly throws an error, as it does not know where to reference that function. Unless you had a function within scope by that name, your anonymous object had already been lost at that stage:

    Code:
    function init3()
    {
    }
    
    init3();

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    'this' in a method means the object that had the property that is the actual method. It can be more than one object depending on the context it's called from.

  8. #8
    Join Date
    May 2011
    Posts
    1
    If you want to have access to all your methods after the initialization, do this:

    Code:
    var myObjectLiteral = ({
    		
    		name: 'myname',
    		getName: function() { 
    			console.log(this.name); 
    			return this; 
    		},
    		init: function() {
    			this.getName();
    			return this;
    		}
    		
    	}).init();
    Access methods above by:

    myObjectLitera.name; // myname
    myObjectLiteral.getName(); // myname

    This is all because I'm returning 'this' after each method. If you don't, your methods will be undefined.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles