CODEWITHSUNDEEP
javascriptfunctionobject
Mark Greenwood
Mark Greenwood

Reputation: 51

Javascript: What happens to the old object when I create a new instance?

I'm not even sure how to phrase this question so I'll have to go with examples. This might not look like useful code here, and indeed it isn't, but it's an example of a problem I've just encountered, stripped down to the bare essentials.

Lets' assume I have

function myObject(params) {

    .. do some time-consuming asynchronous stuff 
       with AJAX and the like ...

    return (before all the above is completed);

}

function myFunction(params) {

    var doTheSlowStuff = new myObject(params);

}

myFunction(firstParams);
myFunction(moreParams);

What happens to the first myObject when I make the second call to myFunction()? Does it get a chance to complete its work (and if so will it be garbage collected when it has)? Or does it get unceremoniously dumped before it has a chance to finish what it started?

Upvotes: 0

Views: 151

Answers (3)

user2864740
user2864740

Reputation: 61965

The asynchronous code has access to a callback function. The callback will run and is independent of any other object. "Losing" the object or creating a new object does not change this. As such, pending asynchronous operations must be explicitly cancelled or the callbacks must be guarded against performing unwanted effects when they are invoked.

The thing about objects in JavaScript is simple: as long as any code - including the callback - can access the object (e.g. assigned to a variable in scope, a window property, or bound to the DOM), they remain accessible. Otherwise, they are unreachable and will be reclaimed at some point.

Upvotes: 0

Rag
Rag

Reputation: 6603

All the time-consuming asynchronous stuff will happen asynchronously :)

That means that the async calls (such as XHR or setTimeout) return instantly and allow execution to continue. In other words, the myObject constructor will return very quickly so there will be no delay between constructing the two myObjects. After both myFunctions return, then finally control will return to the event loop and the JavaScript engine will continue processing events, like mouse clicks, WebSocket events, timers like setTimeout, or XHR requests coming back. Your asynchronous callbacks won't be executed until you return control to the event loop, so don't do anything crazy like 

while(true) {
    // Check XHR status
}

Don't worry about garbage collection; if you have a DOM event like an AJAX (XHR) request with your myObject in scope then it won't be garbage collected until the event handler itself is garbage collected.

Upvotes: 1

gpmcadam
gpmcadam

Reputation: 6580

In this specific instance, you will create two instances of myObject which will be retained in memory until your application exits.

You can prove this by running something asynchronously to test this behaviour:

function myObject(params) {

  // do something async, like output
  // every second ...
  var callback = function () {
    console.log("I am object " + params);
    setTimeout(callback, 1000);
  };
  callback (); 

}

function myFunction(params) {

    var doTheSlowStuff = new myObject(params);

}

myFunction(1);
myFunction(2);
// etc.

See a working example at: http://jsbin.com/osEFuWib/1/edit

Upvotes: 0

Related Questions