0

I bet this has been explained somwhere else, but I do not know how to search for it. I have read many explanations and approaches to OO in JS without something like TS or new ES6 and everywhere, a different syntax is used, but never compared all those approaches together.

As far as I know, there are 3 ways to create a new object in JS as we know it form different languages out there. But what are the differences and what is best practice to achieve this OO design?

Approach 1:

var Foo1 = function() { this.a = 1 }
var testFoo1 = new Foo1();
console.log(testFoo1.a); //prints "1"

Approach 2:

function Foo2() { this.a = 2 }
var testFoo2 = new Foo2();
console.log(testFoo2.a); //prints "2"

So far so good, the code is pretty much the same, except the syntax for the declaration of our object function. But already now, I am confused. What are differences here? Is it really just preference?

Last approach is the prototype chain, which needs more code or at least not that well structured code in my opinion, because you can not write it inbetween one bracket.

Approach 3:

Foo3 = function() { }
Foo3.prototype.a = 3;
testFoo3 = new Foo3();
console.log(testFoo3.a); //prints "3"

I hope my question and examples are right and it all makes sense and is not redundant. If it is so, please leave me a comment and I will correct or delete this entry, but do not downvote without writing why. Thank you so much.

EDIT I wanted to point out the object creation process and differences and best practice in plain JS with this question.

Florian Leitgeb
  • 15,657
  • 6
  • 31
  • 40
  • You forgot `Class Foo4 {...}; new Foo4()` (ES6) – Jeremy Thille Oct 23 '17 at 15:14
  • 1
    @JeremyThille `in JS without something like TS or new ES6` He explicitly filtered out ES6. – lilezek Oct 23 '17 at 15:15
  • Oh yeah right, my bad. – Jeremy Thille Oct 23 '17 at 15:15
  • 1
    1 and 2 only differ in function hoisting and having a named function, practically they're identical, and the answer to this can be found elsewhere; it is irrelevant for constructor issues. – That leaves *"How do I achieve something like a constructor method with the prototype approach?"*, which I honestly don't really understand what you mean. – deceze Oct 23 '17 at 15:17
  • 1
    "How do I achieve something like a constructor method with the prototype approach?" —You have a constructor function. You just didn't put any expressions inside it. – Quentin Oct 23 '17 at 15:18
  • Thank you for your answers, I have edited the title and deleted one of my questions because of your answers. In my opinion, it is not the same question as the marked one, because I wanted to point out the object creation process and explicit the difference to directly access prototype object. What is best practice to create objects in JS? – Florian Leitgeb Oct 23 '17 at 15:24
  • 1
    You would use the prototype only when all instances share the *same* property value. If `2` and `3` in your example are basically constants, it's fine. If they should differ between instances (and e.g. initialise them in the constructor depending on a parameter), you obviously cannot use the prototype. – Bergi Oct 23 '17 at 16:23
  • But why do I need to access the prototype to achieve this behaviour? – Florian Leitgeb Oct 24 '17 at 10:47

0 Answers0