Javascript prototype behavior

delegation, javascript, prototype

Solution

When you do this:

Object.carColor = "White";

Then the property `carColor` does not get added to the `Object`'s prototype. It is now a property of `Object`. To see what you expect, what you would do is:

Object.prototype.carColor = "White";

Then after that:

alert(({}).carColor); // Will alert "White"

So what happens here is that. any object created including `{}` (which is nothing but an empty object) is a new instance of `Object` and hence shares the properties of whatever is set in the prototype of `Object`.

As for how your `Object.create` function works. Let us look at it line-by-line:

 1. var F = function() {};

You just create a new function, an essentially blank object. The reason you use a function and not something like `{}` is because a function can be coupled with a `new` call to create a new instance of that object wherein the function would act as a constructor.

2. F.prototype=o;

You set the prototype of the new blank function to the object you've created. Now, this is purely a reference. It is not a deep-copy. What I mean is that as the object `o` changes, so will any instances of the objects (actually they won't change, but they would 'seem to' change. More on that later).

3. return new F();

Now you just create a new instance of that function, which has a prototype as the object you passed.

When you do the following:

var car1 = Object.create(car);

You get an object `car1` which has the prototype has `car`. So when you do this:

car.year = 2011

It isn't like `car1` changes. It is more like the object that the prototype refers to changes. So when you do something like:

car1.year

A search is made (first in the prototype, then in the object) for a property called `year` and turns out, that the prototype has it and hence `car1.year` will return `2011`.

So the bottom line is this:

- A prototype is shared amongst instances.

- Changing the properties of an `Object` will not manifest into any instances changing.

Problem

I have a method that will let me select the prototype object when creating a new object (copied from "Javascript: The Good Parts" book): ``` Object.create = function(o) { var F = function() {}; F.prototype=o; return new F(); } ``` Now say, I have an object: ``` var car = { model: "Nissan" }; ``` And I create a new object based on this object, using the "Create" method: ``` var car1 = Object.create(car); ``` I can then add a property to car and it will dynamically get added to car1 (dynamic prototyping). So for eg: ``` car.year=2011; // Gets added to "car"... alert(car1.year); // ... Is also avaialable to car1 ``` Q1) This behavior indicates that "year" got added to car's prototype, which is why it is available to car1. Is this correct? If not, then where does "year" get added and why is it available to both "car" and "car1"? Also, per the rule of delegation, if a method cannot be found on an object, it will search its prototype and then check all the prototypes up the chain till it gets to Object.prototype. So now, if I type something like this: ``` Object.prototype.originCountry = "Japan"; alert(car.originCountry); // Outputs Japan alert(car1.originCountry); // Outputs Japan ``` So far so good; however, if I do: ``` Object.carColor= "White"; alert(car.carColor); // Error! ``` Q2) When I add a property to "car" (see car.year example above, it gets added to car's prototype. However, when I add a property to Object, it does not get added to Object's prototype? If it does get added to Object's prototype, then why is it not available to "car", per the rule of delegation? Why is this happening?

Original source