CODEWITHSUNDEEP
javascriptobject
Joey van Hummel
Joey van Hummel

Reputation: 450

Javascript: re-using variable for multiple new object(). Bad practice?

Consider the following:

function pageStruct ( )
{
    this.URL = location.href;
    this.isVideo = ( this.URL.indexOf('/watch?v=') > -1 );

    console.log ( "URL: "     + this.URL );
    console.log ( "isVideo: " + this.isVideo );
}

Then as my main program:

var page = new pageStruct ( );

// Attach event for catching AJAX page loads
$( document ).bind( "DOMSubtreeModified", function( )
{
    /* By checking the URL after the event fires, we can make sure the page has changed */
    if ( page.URL !== location.href )
    {
        page = new pageStruct ( );

        /* Everytime YouTube loads a new page through AJAX, I can do things here and have updated my 'page' Object*/
    }
});

My question is as follows: As a newbie to javascript I do not completely necessarily understand how the objects work. If I do this as stated above, is that bad practice? Something's telling me that using a new every time may cause memory leaks, or does JavaScript automatically take care of this? Coming from C/C++, I am worried about this.

I did find that once all references to all objects are gone, the object is destroyed. Am I right to reason that since I am using the same variable, and refer it to a new object, the old one is no longer referenced to, and thus destroyed?

My second question would be similar; is using a global var ('page') also bad practice? Since this is a Chrome Extension, I'll be using the object across multiple files and scopes.

Upvotes: 2

Views: 77

Answers (3)

Maneesh Singh
Maneesh Singh

Reputation: 575

for that you can make prototype base class. as like .

function pageStruct(){
    this.Url = location.href;
    this.isVideo = (this.URL.indexOf('/watch?v=') > -1)
 }
pageStruct.prototype ={

 page:function() {
      var that = this;
          return [that.Url, that.isVideo, that];      
  }

}

var strct = new pageStruct();
var context;
$( document ).bind( "DOMSubtreeModified", function( ) {

 if ( page.URL !== location.href ){
      page = strct.page();
      context = page[2];
  }     
}

Upvotes: 1

Stefano Ortisi
Stefano Ortisi

Reputation: 5326

As @Andy897 said, it's plenty of articles explaining the object mechanisms and memory management in javascript. Talking about the best way to achieve your aim, I would use one single instance of your class, updating its parameters instead of creating a new instance. So you could make use of the prototype:

Define your class with an update method (CamelCase for class name is a good practice in Javascript)

var PageStruct = function( ) {
    this.update();
}


PageStruct.prototype.update() {
    this.URL = location.href;
    this.isVideo = ( this.URL.indexOf('/watch?v=') > -1 );

    console.log ( "URL: "     + this.URL );
    console.log ( "isVideo: " + this.isVideo );
}

Instantiate your "singleton" instance

var page = new PageStruct ( );

And then simply call the udpate method 

// Attach event for catching AJAX page loads
$( document ).bind( "DOMSubtreeModified", function( )
{
    /* By checking the URL after the event fires, we can make sure the page has changed */
    if ( page.URL !== location.href )
    {
        page.update();

        /* Everytime YouTube loads a new page through AJAX, I can do things here and have updated my 'page' Object*/
    }
});

Upvotes: 1

Andy897
Andy897

Reputation: 7133

Instead of me explaining it here, I think you should read this: :)

http://ericleads.com/2013/01/javascript-constructor-functions-vs-factory-functions/

Upvotes: 3

Related Questions