Why use Javascript prototypical inheritance?

Question

I am learning Javascript and prototypical inheritance and haven't really gotten my head around it.

Example:

function Person(firstname) {
  this.firstname = firstname;
  this.greet1 = function() {
    console.log('Hi ' + this.firstname);
  };
};

Person.prototype.greet = function() {
  console.log('Hi ' + this.firstname);
};

var John = new Person('John');
john.greet();
john.greet1();

Both greet and greet1 give me the same result. So what is the difference and why would you use the prototype?

You are doing the same thing in both functions. Did you expect something different? — Tigger, Aug 01 '17 at 09:56
Possible duplicate of [Use of 'prototype' vs. 'this' in JavaScript?](https://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript) — DarthJDG, Aug 01 '17 at 09:56
@Prabhakaran they're not. `greet1` isn't in the prototype of `Person`. — evolutionxbox, Aug 01 '17 at 09:57

score 0 · Answer 1 · answered Aug 01 '17 at 09:56

With the first version, every time you're creating a new instance of the class it would create a instance property for the greet1 method.

With the prototype approach it's only creating the property greet once on the prototype.

If you have for example 1000 instances of Person you would have 1000 properties called greet1 in memory. With method 2 i would only be 1.

For a more detailed explanation look at the answer of this question.

score 0 · Answer 2 · answered Aug 01 '17 at 09:56

In the first example, you create an instance of the greet function for every instance of Person, while when you use the prototype, there is only one copy of the function, which every Person instance shares. It's more efficient for bigger applications (memory wise).

score 0 · Answer 3 · answered Aug 01 '17 at 10:01

because you can freely extend the prototype without touching the base object.

this means you can do something like this:

Array.prototype.sum = function() {return this.reduce((a,b)=>a+b)};

and use something like this afterwards:

[1,2,3,4].sum()

how is this useful?

sometimes you expect a certain behavior in all browsers. if it is unavailable you can fill the base objects with so called polyfills.

how is it useful for your own objects?

functions in prototypes are not copied but linked to your objects. this reduces memory usage and increases execution and initialisation speed.

keep things simple stupid and you are good to go.

score 0 · Answer 4 · answered Aug 01 '17 at 14:23

The idea behind creating prototypes is to avoid any duplications. Using the prototype makes for faster object creation, since that function does not have to be re-created each time a new object is created.

Consider the following example:

function Person(firstname) {
this.firstname = firstname;
this.greet1 = function() {
console.log('Hi ' + this.firstname + ' by greet1');
};
};
Person.prototype.greet = function() {
console.log('Hi ' + this.firstname + ' by greet');
};
var john = new Person('John');
var sam = new Person('Sam'); //a new instance created here

john.greet1(); //Hi John by greet1
sam.greet1(); //Hi Sam by greet1

console.log(john);//Person{firstname: "John", greet1: function (){…}}
console.log(sam);//Person{firstname: "Sam", greet1: function (){…}}
//greet1 is duplicated in both the instances, we can use prototypes and
//avoid this behaviour.

john.greet(); //Hi John by greet
sam.greet();  //Hi Sam by greet

//Hence with prototypes the same result can be obtained without any
//duplications.

Why use Javascript prototypical inheritance?

4 Answers4