JavaScript inheritance with and without using of prototype

Question

Could you explain me why necessary (or recommended) to use “__proto__” and “prototype” in JavaScript inheritance? Here are two code examples and it seems that their result is exactly the same with and without using of prototype. The result is the following in both cases:

"elephant is walking to melbourne"

"sparrow is walking to sydney"

"sparrow is flying to melbourne"

Example one:

function Animal(name) {
    this.name = name;
}

Animal.prototype.walk = function (destination) {
    console.log(this.name, 'is walking to', destination);
};

var animal = new Animal('elephant');
animal.walk('melbourne');

function Bird(name) {
    Animal.call(this, name);
}

Bird.prototype.__proto__ = Animal.prototype;

Bird.prototype.fly = function (destination) {
    console.log(this.name, 'is flying to', destination);
}

var bird = new Bird('sparrow');
bird.walk('sydney');
bird.fly('melbourne');

Example two:

function Animal(name) {
    this.name = name;
 
 this.walk = function (destination) {
  console.log(this.name, 'is walking to', destination);
 };
}

var animal = new Animal('elephant');
animal.walk('melbourne');

function Bird(name) {
    Animal.call(this, name);
 
 this.fly = function (destination) {
  console.log(this.name, 'is flying to', destination);
 }
}

var bird = new Bird('sparrow');
bird.walk('sydney');
bird.fly('melbourne');

For example why "Bird.prototype.fly = function..." is better than simple "this.fly = function..." in Bird function?

Generally - avoid `__proto__`, it sets the prototype __of an object__ unlike `.prototype` (sets the prototype of objects made with a constructor) or `Object.create` (creates an object with a given prototype. — Benjamin Gruenbaum, Jun 28 '15 at 12:35
possible duplicate of [Defining methods via prototype vs using this in the constructor - really a performance difference?](http://stackoverflow.com/questions/12180790/defining-methods-via-prototype-vs-using-this-in-the-constructor-really-a-perfo) — Matt Browne, Jun 28 '15 at 12:36
The line in your first example would be more correctly written as: `Bird.prototype = Object.create(Animal.prototype);` — Matt Browne, Jun 28 '15 at 12:38
possible duplicate of [correct javascript inheritance](https://stackoverflow.com/questions/10898786/correct-javascript-inheritance/) — Bergi, Jun 28 '15 at 12:56
possible duplicate of http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript — dgrundel, Jun 28 '15 at 12:59
Thanks for everybody. I found the best answer here: http://stackoverflow.com/questions/9772307/declaring-javascript-object-method-in-constructor-function-vs-in-prototype/9772864#9772864 — igoemon, Jun 28 '15 at 13:54

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I think this should make it plenty clear. I've taken the animal out of the script (er... literally).

function Bird(name) {
    this.name = name;
    this.fly = function (destination) {
        console.log(this.name, 'is flying to', destination);
    }
}

var bird = new Bird('sparrow');
bird.fly('Melbourne');
bird.fly = function (destination) {
    console.log(this.name, 'is taking the plane to', destination);
}
bird.fly('Melbourne');

var bird2 = new Bird('eagle');
bird2.fly('Melbourne');

which gives

sparrow is flying to Melbourne

sparrow is taking the plane to Melbourne

eagle is flying to Melbourne

vs.

function Bird(name) {
    this.name = name;
}
Bird.prototype.fly = function (destination) {
    console.log(this.name, 'is flying to', destination);
}

var bird = new Bird('sparrow');
bird.fly('Melbourne');
Bird.prototype.fly = function (destination) {
    console.log(this.name, 'is taking the plane to', destination);
}
bird.fly('Melbourne');

var bird2 = new Bird('eagle');
bird2.fly('Melbourne');

which gives

sparrow is flying to Melbourne

sparrow is taking the plane to Melbourne

eagle is taking the plane to Melbourne

In the first case you are modifying that object's fly function. In the 2nd case, you are modifying a common shared function (from the prototype)

Since you mostly want the function to be common (and the data separate), you usually use Bird.prototype....

It's clear although it isn't answer to my question.One of my question is at the end of my post. Why "Bird.prototype.fly = function..." is better than simple "this.fly = function..." in Bird function? — igoemon, Jun 28 '15 at 13:45
Because in most cases you want a "common" function for the Bird class instead of duplicate functions for the bird class. Much like if you were having a base class and 2 derived classes, you'd put a common function in the base class instead of duplicating it in the 2 inherited classes. In javascript your prototype would be your base (class) and your 2 Bird instances would be your inherited (instances) — potatopeelings, Jun 28 '15 at 13:50

JavaScript inheritance with and without using of prototype

1 Answers1