What is the difference between extending an object using prototype or inline? [duplicate]

Question

What's the difference? Is there any?

var Likes = function (el) {
  this.el = $(el);
  return this;
};

Likes.prototype.add = function (name) {
  this.el.find('.no-results').remove();
  $('<li>', { text: name }).appendTo(this.el);
};

and:

var Likes = function (el) {
  this.el = $(el);
  this.add = function (name) {
    this.el.find('.no-results').remove();
    $('<li>', { text: name }).appendTo(this.el);
  };
  return this;
};

Answer 1

The difference is in how the object gets created. When you define functions on an object's prototype, it's defined ONCE for every further instance of that object.

If you declare functions on an instance level, they get redefined each time you declare the function.

It actually has a performance impact http://jsperf.com/prototype-vs-instance-functions

It's generally considered a best practice to use the prototype for functions that will be re-used on multiple instances of a constructor. For example if you are using the new operator to create instances of a constructor..

var Likes = function (el) {
  this.el = $(el);
  return this;
};

Likes.prototype.add = function (name) {
  this.el.find('.no-results').remove();
  $('<li>', { text: name }).appendTo(this.el);
};

var oneLike = new Likes();
var twoLike = new Likes();
var threeLike = new Likes();

Since the add is defined on the object's prototype, it gets define just one time rather than each time the Likes is instantiated.

Answer 2

Yes, there is a difference.

If you uses prototype object, then all created objects of 'Likes' will have same reference to prototype object. But if you use second method (this.add), it will add function to every created object.

First one is more prefer method than second one.

Answer 3

Example 2 is the better practice because it lends itself to implementing inheritance rather than making wasteful copies of object properties.

In a small application with no inheritance, there is probably not much of a practical difference between the two examples. But imagine that you had 10000 instances of the Likes constructor in a more complex application using inheritance. With the second example, each one of them will receive a copy of the add function locally.

This could theoretically cause memory bottlenecks in a larger application. Also, if you want to change the add method in the future, you would need to do so on each local object.