Home » JavaScript » Prototype » Javascript Prototype methods vs Object methods

About Veera Sundar

Veera Sundar

Javascript Prototype methods vs Object methods

In JavaScript, when you define an object, you can attach it’s functions in two different ways.

  1. Inside object’s constructor function, using this.func = function(){...}
  2. Using prototype. i.e. Obj.prototype.func = function() {...}.

In both approaches, the function func() will be accessible to all the instances of your object.

But which one is the best way to use?

In short: Use prototype – which is effective for most cases. If your objective is to share common functionality between your object instances, then prototype is the way to go.

1. Modifying the common functionality is easy with Prototype

When you use prototype to attach common functions to objects, it is easy to modify the common logic even after the instances are created. The old and new objects will use the updated code. But this may not be possible if you attach the common code to each object instance, using this.func().

Let’s see this with an example.

function Parent(gender){
  this.gender = gender;

  // attach the common function to each object instance.
  this.yellAtChild = function(){
    console.log('Somebody gonna get a hurt real bad!');
  }
}

// Let's create dad and mom and start yelling at kids.
var dad = new Parent('male');
var mom = new Parent('female');
dad.yellAtChild(); // Somebody gonna get a hurt real bad!
mom.yellAtChild(); // Somebody gonna get a hurt real bad!

// but, Russell has decide to sue you if you use his catch phrase.
// Let's try to tell our already created dad & mon to use different phrase.

// ERROR: Not possible to do this way.
Parent.yellAtChild = function() { .... } 

// You need to override the `yellAtChild` method for each object instance.
dad.yellAtChild = function(){
  console.log('Shut up!');
};
mom.yellAtChild = function(){
  console.log('Go to bed!');
}
dad.yellAtChild(); // Shut up!
mom.yellAtChild(); // Go to bed!

As you can see, if you decide to change the common logic, you can not easily update the object methods since they are already created. You need to modify each and every instance of that object which is tedious.

Let’s see the same example, but this time with prototype.

function Parent(gender){
  this.gender = gender;
}

// Attach the common function to prototype.
Parent.prototype.yellAtChild = function(){
  console.log('Somebody gonna get a hurt real bad!');
};

// Let's create dad and mom and start yelling at kids.
var dad = new Parent('male');
var mom = new Parent('female');
dad.yellAtChild(); // Somebody gonna get a hurt real bad!
mom.yellAtChild(); // Somebody gonna get a hurt real bad!

// but, Russell has decide to sue you if you use his catch phrase.
// Simple: Just modify the function at Parent.prototype.

Parent.prototype.yellAtChild = function(){
  console.log('You are grounded.');
};

dad.yellAtChild(); // You are grounded
mom.yellAtChild(); // You are grounded

So, all the changes that you make to functions in prototype will reflect in all the instances of that object. Even for the new objects that you create will use the modifed method.

2. Prototype is fast and memory efficient.

When you attach methods to object instances, then each instance will have it’s own copy of the method. This involves the system processing time and the memory.

But, when you attach the method to object’s prototype, then only one version of the method exists. This doesn’t need as much processing time and memory when compared to the above approach.

Let’s see this with an example.

var Parent = function(){
  this.yellAtKid = function(){
    console.log('Somebody gonna get a hurt real bad!');
  };
};
console.profile('Object Methods');
var dads = [];
for(var i=0; i<=10000000; i++){
  dads.push(new Parent());
}
console.profileEnd(); // 4903.267ms

When I profiled the above code in Firefox / Mac, the populate() method took about 4903.267ms to execute. If I changed method attachment to prototype instead, like below:

var Parent = function(){
};

Parent.prototype.yellAtKid = function(){
  console.log('Somebody gonna get a hurt real bad!');
};

console.profile('Prototype Methods');
var dads = [];
for(var i=0; i<=10000000; i++){
  dads.push(new Parent());
}
console.profileEnd(); // 3271.413ms

This time, the populate() method took only 3271.413ms seconds. So, about 1.5 seconds we save, just by reattaching the methods to prototype,

I hope that explains why prototype is best way to share common logic between your javascript objects.

Reference: Javascript Prototype methods vs Object methods from our WCG partner Veera Sundar at the Veera Sundar blog.
0 0 vote
Article Rating
(0 rating, 0 votes)
You need to be a registered member to rate this.
1 Comment Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alex Vera
Alex Vera
4 years ago

Great post, I’m strting to love this site always have good ebooks

1
0
Would love your thoughts, please comment.x
()
x