Javascript and function prototype assignment

Question

I've always assumed that the prototype of a function was shared among all the objects, in a sense by reference. So if you change the value of a property of the prototype, all objects that share that prototype have the values change for them as well. So for instance below it seems that instead of the property bar being shared between all objects, it is copied. Is this right? Are the properties of the prototype of the constructor simply copied to all the class objects as they are created, or are they shared by linkage?

function foo()
{
     this.bar = 1;
}
function derived() { }
derived.prototype = new foo()

object1 = new derived()
object2 = new derived()

object1.bar = 2;
//but notice if I had said here derived.prototype.bar = 3, object1.bar would still equal 2 but object2.bar would equal 3
alert(object2.bar) // this prints 1;

Christian C. Salvadó · Accepted Answer · 2011-10-03 05:34:34Z

12

When you assign object1.bar = 2, you are creating an own property on object1, this property exist only in that object instance, and it has nothing to do with its prototype.

This property on object1 will shadow the value of the one existing on derived.prototype, this means that when you lookup object1.bar, it will find a value directly existing on that object.

On the other side, if you lookup object2.bar, this object doesn't have an own bar property, so the property lookup will search on the object this one inherits from (derived.prototype) and it will find the value 1.

Your object structure looks something like this:

 object1
 --------
| bar: 2 | -----------------
 --------                   |         derived.prototype
                            |        ----------
                            |------> | bar: 1  | --    foo.prototype
 object2 (no own properties)|        ----------   |   ------------------
 --------                   |                     -> | constructor: foo |
|        | -----------------                          ------------------
 --------                                                    |
                                                             v
                                                     ------------------
                                                    | Object.prototype |
                                                     ------------------
                                                             |
                                                             v
                                                            null

Where the ---> lines denote the internal [[Prototype]] link that expresses inheritance.

edited Oct 3, 2011 at 5:34

answered Oct 3, 2011 at 5:12

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rubixibuc Over a year ago

ohhh, makes perfect sense, so as long as I don't re-assign it, it refers to the inherited property, so once I assign it become a own property?

rubixibuc Over a year ago

I got it now, that diagram helped a lot, thank you so much, your answer was awesome :-)

Christian C. Salvadó Over a year ago

@rubixibuc, right, once you assign it, it will become an own property and it will shadow any value up in the prototype chain. Also note that the [[Prototype]] link cannot be changed once an object is created, for example, after creating object1 and object2, you reassign a different object to derived.prototype this won't affect the properties inherited by those two objects.

Christian C. Salvadó Over a year ago

@rubixibuc I updated the diagram, I had forgotten foo.prototype :)

Andrew D. · Accepted Answer · 2011-10-03 05:49:53Z

For example, you have code:

function Animal() {
}
Animal.prototype.name="animal";

function Dog() {
}
Dog.prototype = new Animal
Dog.prototype.constructor=Dog;
Dog.prototype.name="dog";

object1 = new Animal();
object2 = new Dog();

As a result you have two object instances, that looked as (you can check this for example in Chrome devtools or FF firebug or...):

object1:
  __proto__: (is ref into an Animal.prototype object)
    constructor: function Animal()
    name: "animal"
    __proto__: Object (is ref into an Object.prototype object)

object2:
  __proto__: (is ref into an Dog.prototype object)
    constructor: function Dog()
    name: "dog"
    __proto__: (is ref into an Animal.prototype object)
      constructor: function Animal()
      name: "animal"
      __proto__: (is ref into an Object.prototype object)

When you run next code (for example):

alert(object1.name); // displayed "animal"
alert(object2.name); // displayed "dog"

What happened? 1) Javascript looked for property name in object instance (in object1 or object2). 2) When not found, it looked up in object instance proto property (that is same as prototype of class function). 3) When not founct it looked in proto of proto and next and next while not found name property and others proto found. If as result of search property is found, then value is returned, if not found, then undefined returned.

What happened if you execute next code:

object2.name = "doggy";

As a result you have for object2:

object2:
  name: "doggy"
  __proto__: (is ref into an Dog.prototype object)
    constructor: function Dog()
    name: "dog"
    __proto__: (is ref into an Animal.prototype object)
      constructor: function Animal()
      name: "animal"
      __proto__: (is ref into an Object.prototype object)

Property is assigned directly into instance object, but prototype object remains unchanged. And when you execute:

alert(object1.name); // displayed "animal"
alert(object2.name); // displayed "doggy"

When you need to create|change shared property of class, you can use one from next algoritms: 1)

Animal.prototype.secondName="aaa";
alert(object1.secondName); // displayed "aaa"
alert(object2.secondName); // displayed "aaa"
Animal.prototype.secondName="bbb";
alert(object1.secondName); // displayed "bbb"
alert(object2.secondName); // displayed "bbb"
// but
Animal.prototype.secondName="ccc";
object1.secondName="ddd";
alert(object1.secondName); // displayed "ccc"
alert(object2.secondName); // displayed "ddd"

2) Create property of type object in prototype of function class and assign values to properties of this object.

Animal.prototype.propObject={thirdName:"zzz"};
alert(object1.propObject.thirdName); // displayed "zzz"
alert(object2.propObject.thirdName); // displayed "zzz"
Animal.prototype.propObject.thirdName="yyy";
alert(object1.propObject.thirdName); // displayed "yyy"
alert(object2.propObject.thirdName); // displayed "yyy"
object1.propObject.thirdName="xxx";
alert(object1.propObject.thirdName); // displayed "xxx"
alert(object2.propObject.thirdName); // displayed "xxx"
object2.propObject.thirdName="www";
alert(object1.propObject.thirdName); // displayed "www"
alert(object2.propObject.thirdName); // displayed "www"

Collectives™ on Stack Overflow

Javascript and function prototype assignment

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related