原型javascript

Question

Cannot understand:

function Rabbit() { }
Rabbit.prototype = { eats: true };
var rabbit = new Rabbit();
Rabbit.prototype = {};
alert(rabbit.eats); //true

And

function Rabbit() { }
Rabbit.prototype = { eats: true };
var rabbit = new Rabbit();
Rabbit.prototype.eats = false;
alert(rabbit.eats); // false

Why?
Thanks everyone for help, I get it after "In your first example, you change Rabbit.prototype to point to an entirely new, different, object. So now Rabbit.prototype and rabbit.[[Proto]] no longer point to the same object" (c) TJ Crowder

Answer 1

Because the prototype behind the rabbit instance is assigned (from Rabbit.prototype ) when it's created via new Rabbit , and in the first example you replace Rabbit.prototype with an entirely new object, which has no effect on the rabbit instance. In the second example, you just modify the existing object, which both Rabbit.prototype and the prototype behind rabbit are pointing to, so since they're pointing to the same object, you see the change regardless of which reference you follow.

Let's walk through var rabbit = new Rabbit(); (leaving out some irrelevant details):

1. A new, blank object gets created.

2. Its underlying prototype, usually called [[Proto]] , is set to Rabbit.prototype . (I say "usually called" because that's what the specification calls it. You can't access it by that name directly. You can find out what it is for a given object, though, in an ES5-enabled environment via Object.getPrototypeOf . Some JavaScript engines also make it available via a non-standard property actually called [in code] __proto__ .)

3. That new object is returned and assigned to rabbit .

Now, we have two objects pointing to the prototype object: Rabbit.prototype , and rabbit.[[Proto]] .

In your first example, you change Rabbit.prototype to point to an entirely new, different, object. So now Rabbit.prototype and rabbit.[[Proto]] no longer point to the same object.

In your second example, you just change the value of that shared object's eats property, so naturally that change is visible regardless of which reference to the object you follow.

It's basically the same as this:

var a = {eats: true};
var b = a;
a = {eats: false};
console.log(a.eats); // false
console.log(b.eats); // true

and

var a = {eats: true};
var b = a;
a.eats = false;
console.log(a.eats); // false
console.log(b.eats); // false

Answer 2

Rabbit.prototype = { eats: true };

is equivalent to

Rabbit.prototype = {};
Rabbit.prototype.eats = true;

And

Rabbit.prototype.eats = false;

just makes Rabbit.prototype.eats false (thus voiding the precedent assignation).

And as the js engine, when looking for a property, looks for the one of its prototype (and so on) if it doesn't find it locally, it makes Rabbit.eats evaluate to false.

Answer 3

In the first case, the constructed object remains linked to the original prototype object, which of course still has the "eats" property.

In the second case, you're not introducing a new prototype, so changing the value of its "eats" property is visible via the instance.