Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript prototype behavior

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?

like image 963
Taha Ahmad Avatar asked Apr 26 '12 06:04

Taha Ahmad


2 Answers

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:

  1. A prototype is shared amongst instances.
  2. Changing the properties of an Object will not manifest into any instances changing.
like image 78
Rohan Prabhu Avatar answered Oct 17 '22 00:10

Rohan Prabhu


In your first example, you are adding to the prototype of your car1 because car === F.prototype and car1 instanceof F. So to Q1: yes.

Object is the constructor function of all objects, as F is to your car1. If you add something on Object.prototype, it will be available on all objects - that's the reason why you should not, such non-enumerable properties mess up all for-in-loops. If you set a property of the Object constructor function, nothing changes for the things that inherit from it. Don't forget: Object equals the F function, not the o parameter for prototype setting. new Object() is like Object.create(Object.prototype).

like image 25
Bergi Avatar answered Oct 16 '22 23:10

Bergi