CODEWITHSUNDEEP
javascriptfunctionobject
WaiKit Kung
WaiKit Kung

Reputation: 1296

JavaScript new Function confusion

While reading Learning JavaScript 2nd edition, I see a block of code in Chapter 13: Creating Custom JavaScript Objects.

var oneOff = new Function () {
    this.variablea = "variablea";
    this.method = function () {
        return xxx;
    }
}

It is said that it is the same as:

var oneOff = new Object();
oneOff.variablea = "variablea";
oneOff.method = function () {...};

But I don't know what new Function () {..} is. Any help is appreciated. Thanks.

Upvotes: 0

Views: 137

Answers (2)

GameAlchemist
GameAlchemist

Reputation: 19294

When using new function() { /* */ }, you are not creating a new function, but rather an object.
It is just a standard use of new with a constructor function, like in : 

var oneInstance = new ConstructorFunction();

function ConstructorFunction() {
         this.var1 = 'val1';
         this.method1 = function() { } ;
}

The difference is that the constructor is defined right at the time of instantiation, and we omit to call the function, which is legal (although confusing i think).

I find it somehow clearer with some brackets, and making explicit the call to the constructor :

var oneOff = new  ( function () {
  this.variablea = "variablea";
  this.method = function () {
    return xxx;
  };
} ) () ;

but for creating just one single object, one would rather use the simple object notation :

var oneOff = {
  variablea : 'valuea',
  method    : function () { return xxx; }
}

How do they compare in performances ?

For the new function() {} method, creating the object will require to first create a function, then execute that function within a 'new' context. On the other hand, object litteral just create ...one object, so it's less time and less garbage created.

On use performances of the two types of objects (time to read/write a property /use a method) it's very hard to say since all javascript interpreters are very complex and very different. When and how do they decide to optimize a part of the code is something you can't really know before benchmarking. - And benchmarking is not an easy task also because of those 'random' optimisations. My bet is that they should be very close in use performance, let us know if you take the time to do some measures.

Upvotes: 2

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

new function (notice F is lowercase) is one of the many ways of creating an object in Javascript. After the code is interpreted an object will be assigned to oneOff with variablea and method properties.

Another way to achieve this is to use the object literal notation:

var oneOff = {
    variablea:"variablea",
    method:function () {
        return xxx; //this will be undefined
    }
}

This works fine if you only need one instance of oneOff however if you need multiple instances of oneOff you can use the function constructor as follows:

function OneOff(){
    this.variablea = "variablea";
}

OneOff.prototype.method = function(){
   return xxx; //one again undefined
}

var firstOneOff = new OneOff();
var secondOneOff = new OneOff();

Upvotes: 1

Related Questions