为什么原型中定义的方法会显示在对象本身中？

Question

Standard example for prototype inheritance learners:

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

Animal.prototype.stop = function() {
    this.speed = 0;
};

Animal.prototype.run = function(speed) {
    this.speed += speed;
};

function Rabbit(name) {
    this.name = name;
    this.speed = 0;
}

Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;

Rabbit.prototype.jump = function() {
    this.speed++;
};

var rabbit = new Rabbit('Bunny');

Looking at Google Chrome debugger, I can see the following picture:

What confuses me:

1. Prototype of Rabbit is set to Animal .
2. jump() method is defined on Rabbit 's prototype - not on a Rabbit itself.
3. Google Chrome shows jump() as part of Rabbit .

It seems reasonable, because I don't want jump() to become part of Animal , but non-logical, because I define jump() on instance of Animal . Is there some special treatment for object in prototype property, like "set the object, defined in prototype as __proto__ , but move all additional methods definition into child objects"? Or I get it wrong?

Answer 1

To answer your questions:

1) Prototype of Rabbit is set to Animal:
You indicate this with the following code:

Rabbit.prototype = Object.create(Animal.prototype);

Object.create() creates a new object with the prototype as the first argument.
It's used to create the prototypes chain between Animal and Rabbit.

2) jump() method is defined on Rabbit's prototype - not on a Rabbit itself.

It happens because you added this method exactly to the prototype, but not on the Rabbit instance.

Rabbit.prototype.jump = function() {
    this.speed++;
};

3) Google Chrome shows jump() as part of Rabbit.
Yes, the jump() method is a part of the Rabbit: inherited from Rabbit.prototype.

4) It seems reasonable, because I don't want jump() to become part of Animal, but non-logical, because I define jump() on instance of Animal
You define jump() on a instance of Animal (a new instance, because Object.create() was used, but still keeping the Animal prototype), which becomes the prototype of Rabbit.

5)"set the object, defined in prototype as proto , but move all additional methods definition into child objects"
It happens automatically on runtime, when an instance inherits properties and methods from the prototype object.

One thing that may be confusing is why Google console shows: __proto__: Rabbit and __proto__: Animal . Actually it displays the constructor function name, which is linked with the prototype objects.

Answer 2

You're only using the instance of Rabbit to get the prototype - but Animal has a reference to that same prototype - in essence, Rabbit extends Animal (or vice versa). So if you change the Rabbit's prototype, you change the Animal's prototype too.

You could define jump in the rabbit itself, not the prototype. Alternatively, you could set the Rabbit's prototype to a new Animal object and modify that.