3
var Foo = new function(){
    this.A = 1;
    this.B = 2;
};
var Bar = {
    A: 1,
    B: 2
};
typeof Foo === "object"
typeof Bar === "object"

What's the difference between the two?

I only found their __proto__ objects to be different:

Elmo
  • 6,409
  • 16
  • 72
  • 140

4 Answers4

0

OK:

var Foo = new function(){
    this.A = 1;
    this.B = 2;
};

We've got var Foo = new a function — which means that the runtime will invoke that function with this set to a newly-constructed object whose internal prototype link will be set to the value of the "prototype" property of that function. Because that's just an anonymous function instantiated right there in the initialization, its "prototype" property is just a plain empty object, so it really doesn't do anything. The constructor function does initialize two properties of the new object, and that new object is the returned value from the new expression. Thus, Foo is assigned a reference to that constructed object, and the object has a couple of assigned properties. It also has a prototype chain that includes the empty object from the anonymous constructor function, and then after that the prototype inherited from the Object constructor.

In this:

var Bar = {
    A: 1,
    B: 2
};

we have a variable (Bar) being set to the result of an object initializer expression. That always creates a plain object that inherits only from the Object prototype. The only way that this object is different from the Foo object is that the Foo object has an extra (empty) object in its prototype chain.

So:

  • Foo will end up being a plain object, not a function.
  • Bar will also be a plain object, more obviously not a function.
  • Foo and Bar will be similar but not identical (well, two different objects are never identical, but I mean in terms of their particular characteristics) because Foo has that extra empty object in its prototype chain.
Pointy
  • 405,095
  • 59
  • 585
  • 614
-1

The first one is a function constructor which outputs a function object (what is assigned to Foo), and the other is just a plain javascript object.

justinledouxweb
  • 1,337
  • 3
  • 13
  • 26
  • You missed the fact that the constructor is **called** via the `new` operator. – Pointy Apr 08 '16 at 20:28
  • @Pointy i suppose he has subtly implied that by "function constructor", but being precise would be nice – Ji_in_coding Apr 08 '16 at 20:29
  • @Ji_in_coding Foo is just an object; it is not a function and it is not a constructor. – Pointy Apr 08 '16 at 20:30
  • @Pointy, oh you are right, i just noticed there is a "new" before the function – Ji_in_coding Apr 08 '16 at 20:32
  • @Pointy I'm sorry, but it is a function constructor. Here is the doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function – justinledouxweb Apr 08 '16 at 21:20
  • `new Function ([arg1[, arg2[, ...argN]],] functionBody)` – justinledouxweb Apr 08 '16 at 21:20
  • No, it is not. The `new` operator causes that function to be **called**, and Foo is assigned the newly-constructed object. – Pointy Apr 08 '16 at 21:25
  • We're saying the same thing. `new function(){}` is a function constructor. It outputs a function object. – justinledouxweb Apr 08 '16 at 21:27
  • @justinledouxweb no, we are **not** saying the same thing. `new` followed by a function causes that function to be **immediately called** and the result is the new object created. There is a function involved, but that function is called and the value of Foo will be a plain object. Try it yourself in your browser console! – Pointy Apr 08 '16 at 21:38
  • Sure, a new function object. Read the first sentence on the link I posted. It is exactly saying what we are saying. – justinledouxweb Apr 08 '16 at 21:44
  • Sure in both cases `typeof Foo` and `typeof Bar` is equal to `object`, but the difference is one is a function object (an object that extends the native function object, and the other is an object initializer. They both have different prototypes because they extend a different native object. – justinledouxweb Apr 08 '16 at 22:02
  • @justinledouxweb no no no no no no no no no. Foo is **absolutely not** a Function instance. It's a plain object. The `new` before that anonymous function means that the anonymous function is **called as a constructor**, and Foo is set to the **result** of that call. The result is a plain non-function object. – Pointy Apr 08 '16 at 22:32
-1

In Javascript all functions are objects. And in your case Foo and Bar are the same, but you can construct the first.

On the same token, I would say that the key insight with constructor functions in this case is that if we have:

function myFoo (){
    this.A = 1;
    this.B = 2;
};

then

var Foo1 = new myFoo();

the this context is Foo.

var Foo2 = myFoo();

the this is bound to the current context, the window object in this case (meaning you actually have window.A = 1).

See the MDN documentation for a more extensive description.

Function

Constructor

new operator

VRPF
  • 3,118
  • 1
  • 14
  • 15
-1

First note it's irrelevant that you omitted the parentheses when calling your anonymous function with new. JSLint will yell at you because it's confusing to do this, but that's what's going on.

I'm pretty sure the internal prototype is the only difference. It may be easier to write this out as it's normally used.

var Car = function() {
    this.seats = 4;
};

var car1 = new Car();
var car2 = {
    seats: 4
};

Reading this it's clear to me that car1 is an object whose internal prototype is Car - which in your case is an anonymous function not directly held by a variable - and car2 is an object whose internal prototype is Object.

Community
  • 1
  • 1
djechlin
  • 59,258
  • 35
  • 162
  • 290
  • The prototype of `car1` will be the value of the "prototype" property of `Car`, not `Car` itself. – Pointy Apr 08 '16 at 21:39