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 mon practice or are there much better ways to define classes.

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 mon practice or are there much better ways to define classes.

• javascript
• oop
• prototype

Share Improve this question Follow asked Nov 20, 2014 at 15:14 hwcverwehwcverwe 5,36777 gold badges3737 silver badges6464 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor