Using prototype JavaScript - best practice

Question

Currently I am working in a project where we are writing Object Oriented JavaScript. In this project I have seen two different ways of defining a class:

1: Declare functions at once on the prototype

My.Namespace.ClassName = function(param1, param2) {
   this.member1 = param1;
   this.member2 = param2;
};

My.Namespace.ClassName.prototype = {
   myFunction1: function() {
      return this.member1 + " " + this.member2;
   },

   myFunction2: function(param1) {
      this.member3 = paraml;
   }
};

2:Prepare each function individual on the prototype

My.Namespace.ClassName = function(param1, param2) {
   this.member1 = param1;
   this.member2 = param2;
};

My.Namespace.ClassName.prototype.myFunction1 = function() {
   return this.member1 + " " + this.member2;
};

My.Namespace.ClassName.prototype.myFunction2 = function(param1) {
   this.member3 = paraml;
};

Is there any difference in how JavaScript behaves based on the two given examples or is it only a style difference?

Personally I haven't seen any behavior difference but I have the feeling that there must be a subtle difference which I am currently missing.

Besides that. I would like to know whether this is a common practice or are there much better ways to define classes.

Scimonster · Accepted Answer · 2014-11-20 15:27:29Z

8

There is a subtle difference. In the first method, when you overwrite the prototype, there was a property there that is now lost. That's the constructor, which points back to your function. The constructor allows you to recreate the type of object that it is.

You can easily get it back and so use the first method by manually setting it:

My.Namespace.ClassName.prototype = {
   myFunction1: function() {
      return this.member1 + " " + this.member2;
   },

   myFunction2: function(param1) {
      this.member3 = paraml;
   },
   constructor: My.Namespace.ClassName
};

See also: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

edited Nov 20, 2014 at 15:27

answered Nov 20, 2014 at 15:22

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hwcverwe Over a year ago

Can you explain in more detail what you mean with In the first method, when you overwrite the prototype, there was a property there that is now lost. Do you mean that there is a difference in the My.Namespace.ClassName.constructor before and after calling var obj = new My.Namespace.ClassName("value1", "value2")?

Scimonster Over a year ago

No - My.Namespace.ClassName.prototype comes with a constructor property. When you overwrite the prototype, the constructor is lost.

hwcverwe Over a year ago

Accepted but one question though: Can I combine both styles or will that cause somewhere problems?

Scimonster Over a year ago

If you use the code here to add back the constructor property, so there's no reason why you can't then add more properties to the prototype like any other object.

tforgione Over a year ago

Is there one way considered as a better practice than the other one ?

Collectives™ on Stack Overflow

Using prototype JavaScript - best practice

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related