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
– Benjamin Gruenbaum, Commented Jun 28, 2015 at 12:35
possible duplicate of Defining methods via prototype vs using this in the constructor - really a performance difference? — Matt Browne
– Matt Browne, Commented Jun 28, 2015 at 12:36
The line in your first example would be more correctly written as: Bird.prototype = Object.create(Animal.prototype); — Matt Browne
– Matt Browne, Commented Jun 28, 2015 at 12:38
possible duplicate of stackoverflow.com/questions/310870/… — dgrundel
– dgrundel, Commented Jun 28, 2015 at 12:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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....

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 28, 2015 at 12:49

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

igoemon Over a year ago

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?

potatopeelings Over a year ago

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)

Collectives™ on Stack Overflow

JavaScript inheritance with and without using of prototype

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related