Why do objects in the Chrome console appear different when using a factory function vs a constructor function?

Question

Given the following code (taken from this answer):

function ConstructorFunction() {
    this.someProp1 = "cf1";
    this.someProp2 = "cf2";
}
ConstructorFunction.prototype.someMethod = function () { /* whatever */ };

function factoryFunction() {
    var obj = {
        someProp1: "ff1",
        someProp2: "ff2",
        someMethod: function () { /* whatever */ }
    };
    // other code to manipulate obj in some way here
    return obj;
}

let objFromConstructor = new ConstructorFunction()
let objFromFactory = factoryFunction()

console.log(objFromConstructor)
console.log(objFromFactory)

I get different looking objects in the Chrome console:

There is text (ConstructorFunction) before the constructor function object - what is this called?

Why is the object from the factory function missing this text?

Does the difference in structure affect anything about how these objects will work?

Yes the console shows you that the first object is an instance of the ConstructorFunction class, the second object is not an instance of that class so you don't see that label, you can see the difference in methods, the first object has access to that method via it's Contructor prototype, but the second object has the method on it... — Saadi Toumi Fouad, May 04 '20 at 18:17
@SaymoinSam Technically, JavaScript doesn't have classes (nor instance of classes). It has objects. `class` is a syntactic keyword that makes designing prototype objects simpler. — Scott Marcus, May 04 '20 at 18:18
Yes I know, it's a prototype based programming language, I jsut prefer to say class although it's not a class, it's only ES6 syntax... and instance, just so he can understand, but behind the hood it's the same old behaviour. — Saadi Toumi Fouad, May 04 '20 at 18:24
I'm sure there are other implications but if you add this to the factory they print the same thing `Object.setPrototypeOf(obj, ConstructorFunction.prototype);` More [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) — gman, May 04 '20 at 18:41

Scott Marcus · Accepted Answer · 2020-05-06T15:20:27.813

0

There is text (ConstructorFunction) before the constructor function object - what is this called?

ConstructorFunction is the name of your instance object, while with the factory, there is no instance, just an object literal, so no name to report.

Does the difference in structure affect anything about how these objects will work?

Absolutely. The constructor version has this context pointing to each instance generated, while the factory doesn't and the constructor forms the basis of an inheritance chain that is highly configurable, while the factory doesn't.

edited May 06 '20 at 15:20

answered May 04 '20 at 18:14

Scott Marcus

64,069
6
49
71

`this context pointing to each instance generated, while the factory doesn't` - this is not true. The behavior of `this` is resolved at method call time so both `this` points to the instances – slebetman May 04 '20 at 18:19
@slebetman You misunderstand my point. *Within* the function, `this` binding is different, which is why it's used in the Constructor and not in the Factory. Within the Factory, `this` could be anything, while within the Constructor, `this` is pointed to the future instance. – Scott Marcus May 04 '20 at 18:34
Also not true. In the object created by the constructor the behavior of `this` does not depend on the constructor, instead it depends on how you call the method. An object created with a constructor can have the `this` be anything. Yes **within** the constructor `this` is the instance as in within the call of the constructor until the end of the constructor function. But this does not mean that `this` in methods is bound in a special way from object literals. If you mean within the constructor call then yes but your answer does not say that. – slebetman May 04 '20 at 18:46
*Yes within the constructor this is the instance as in within the call of the constructor until the end of the constructor function.* <-- And that's all I've been saying. I don't know why you keep arguing points I haven't made. – Scott Marcus May 06 '20 at 15:21

score 0 · Answer 2 · answered May 04 '20 at 18:21

Chrome tries to guess what is the object's constructor. In other languages this is called the object's class and you can sort of call it that especially with modern class-based syntax.

When you create an empty object using the object literal syntax, {}, the class of the object is merely Object (yes, there is literally a constructor function in js called Object). When this happens Chrome does not print the class name.

The main difference is that the first object has a constructor and the second does not. Generally this has no effect on how the object behaves except when you use features to ask about the object itself. One difference you have noticed is that the object logged by Chrome is displayed differently by the debugging console.

Other differences include the fact that objFromConstructor is an instanceof ConstructorFunction and also an instanceof Object but objFromFactory is only instanceof Object. You can think of the instanceof operator as telling you if an object is of a particular type so you can say that objFromConstructor is a type of ConstructorFunction but objFromFactory is not. Note that all objects inherit form Object so all objects are also of type Object.

In general, unless you are doing some metaprogramming/introspection/reflection by using things like instanceof you will not notice any difference between the two.

Note that this example illustrates why names like `ConstructorFunction` is a bad name for a constructor/class because you can say that `objFromConstructor` is a type of `ConstructorFunction` but it is not a function which is what I would expect an object of type `ConstructorFunction` to be (note that there is a real-world example of an object type being called a function: `React.FunctionComponent` which is a type of function) — slebetman, May 04 '20 at 18:25
*In other languages this is called the object's class* <-- In modern class-based OOP languages, it's called the "super-class", "base class, or "parent class', not the object's class. — Scott Marcus, May 04 '20 at 19:03

Why do objects in the Chrome console appear different when using a factory function vs a constructor function?

2 Answers2