JS prototype inheritance confusing

Question

Actual code.

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

function Rabbit(speed) {
  Animal.call(this, 'Rabbit');
  this.speed = speed;
}

Rabbit.prototype = Animal;
var rabbit = new Rabbit(50);
console.log(rabbit.name, rabbit.speed);

I expected to have console output: Rabbit 50

But I have Animal 50

Can anybody explain why Animal function doesn't rewrite its name property?

Where did you get this Rabbit.prototype = Animal; part from? It should be Rabbit.prototype = Object.create(Animal.prototype) — adiga
– adiga, Commented May 13, 2020 at 7:58
I just played with code and tried this assignment. Also, I debugged this in chrome and first, Rabbit called, then Animal function and it had already assigned 'name' as 'Animal', but 'undefined' if I didn't set the prototype for Rabbit. That was the confusing point I asked. — Book Free
– Book Free, Commented May 13, 2020 at 8:35

Alpaca Bi · Accepted Answer · 2020-05-13 08:44:37Z

Animal just a function

'function' object has a property 'name'

for example

function app(){
 console.log("hello")
}
console.log(app.name) // "app"


function Animal(name){
 this.name = name;
}
console.log(Animal.name) // "Animal"

so Animal object has a property 'name', function object also has a property 'name'

you can try this

function Animal(name) {
  this.notname = name; //do not use "name" as a property name
}

function Rabbit(speed) {
  Animal.call(this, 'Rabbit');
  this.speed = speed;
}

Rabbit.prototype = Animal;
var rabbit = new Rabbit(50);
console.log(rabbit.notname, rabbit.speed);

or

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

function Rabbit(speed) {
  Animal.call(this, 'Rabbit');
  this.speed = speed;
}

Rabbit.prototype = new Animal(); 
//you should point the Rabbit.prototype to a Animal object,not a function

var rabbit = new Rabbit(50);
console.log(rabbit.name, rabbit.speed);

Ulysse BN · Accepted Answer · 2020-05-13 08:18:50Z

0

Using Object.create, you should end up with something like:

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

function Rabbit(speed) {
  Animal.call(this, 'Rabbit')
  this.speed = speed
}

Rabbit.prototype = Object.create(Animal.prototype)
// If you don't set this line, `new Rabbit` would call `Animal` constructor
Rabbit.prototype.constructor = Rabbit
var rabbit = new Rabbit(50)
console.log(rabbit.name, rabbit.speed)

answered May 13, 2020 at 8:18

Ulysse BN

11.7k7 gold badges64 silver badges95 bronze badges

Collectives™ on Stack Overflow

JS prototype inheritance confusing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related