24

Has anyone noticed this behavior before? This really threw me off... I would have expected prototyped arrays to be private to each class instance rather than shared between all class instances.

Can someone verify that this is the correct behavior and perhaps explain this behavior in more detail?

Notice the commented code and how it affects the behavior of the script.

<html>
<head>

<script type="text/javascript">

function print_r( title, object ) {

    var output = '';
    for( var key in object ) {

        output += key + ": " + object[ key ] + "\n";

    }

    output = title + "\n\n" + output;

    alert( output );

}

function Sandwich() {

    // Uncomment this to fix the problem
    //this.ingredients = [];

}

Sandwich.prototype = {

    "ingredients" : [],
    "addIngredients" : function( ingArray ) {

        for( var key in ingArray ) {

            this.addIngredient( ingArray[ key ] );

        }

    },
    "addIngredient" : function( thing ) {

        this.ingredients.push( thing );

    }

}

var cheeseburger = new Sandwich();
cheeseburger.addIngredients( [ "burger", "cheese" ] );

var blt = new Sandwich();
blt.addIngredients( [ "bacon", "lettuce", "tomato" ] );

var spicy_chicken_sandwich = new Sandwich();
spicy_chicken_sandwich.addIngredients( [ "spicy chicken pattie", "lettuce", "tomato", "honey dijon mayo", "love" ] );

var onLoad = function() {

    print_r( "Cheeseburger contains:", cheeseburger.ingredients );

};

</script>

</head>
<body onload="onLoad();">
</body>
</html>

Many thanks.

Dan
  • 744
  • 1
  • 8
  • 23

3 Answers3

37

The prototype of an object is just an object. The prototype properties are shared between all objects that inherit from that object. No copies of the properties are made if you create a new instance of a "class" (classes don't exist anyway in JS), i.e. an object which inherits from the prototype.

It only makes a difference on how you use the these inherited properties:

function Foo() {}

Foo.prototype = {
    array: [],
    func: function() {}
}

a = new Foo();
b = new Foo();

a.array.push('bar');
console.log(b.array); // prints ["bar"]

b.func.bar = 'baz';
console.log(a.func.bar); // prints baz

In all these cases you are always working with the same object.

But if you assign a value to a property of the object, the property will be set/created on the object itself, not its prototype, and hence is not shared:

console.log(a.hasOwnProperty('array')); // prints false
console.log(a.array); // prints ["bar"]
a.array = ['foo'];
console.log(a.hasOwnProperty('array')); // prints true
console.log(a.array); // prints ["foo"]
console.log(b.array); // prints ["bar"]

If you want to create own arrays for each instance, you have to define it in the constructor:

function Foo() {
    this.array = [];
}

because here, this refers to the new object that is generated when you call new Foo().

The rule of thumb is: Instance-specific data should be assigned to the instance inside the constructor, shared data (like methods) should be assigned to the prototype.

You might want to read Details of the object model which describes differences between class-based vs. prototype-based languages and how objects actually work.

Update:

You can access the prototype of an object via Object.getPrototypeOf(obj) (might not work in very old browsers), and Object.getPrototypeOf(a) === Object.getPrototypeOf(b) gives you true. It is the same object, also known as Foo.prototype.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • Hmm... Yes, that makes sense. I made the mistake of expecting prototype to function like a class definition would. The confusing thing is that if Foo.prototype.intValue = 5, and you say b.intValue = 4, a.intValue still = 5. So it only actually applies to the class's object/array members. – Dan Dec 13 '10 at 02:28
  • Then again, if you say b.array = ['whatever'], then a.array doesn't change either. So, explicit assignments using the "=" operator overwrite prototyped properties on an instanced object. – Dan Dec 13 '10 at 02:34
  • @Dan: No, I also showed in my code that `a.array = ['foo'];` will not change the prototype. But in your case with the integer and in my case with the array, you are assigning a totally new value to a property. And if you do this, the property will be set on the actual object. But if you do `a.array.push(1)`, you are **not** setting a property, you are just calling a method in the array contained in `a.array`. You are not changing the reference. – Felix Kling Dec 13 '10 at 02:35
  • Yes, sorry, that is what I meant when I said "overwrite prototyped properties on an instanced object" - you're affecting the actual object in that case, and only that instance. Also, thanks for the link to the details of the object model. I will need to read through that with a fine toothed comb. – Dan Dec 13 '10 at 02:36
  • @Dan: Your second comment is absolut correct, I just could not express it so well ;) – Felix Kling Dec 13 '10 at 02:36
  • @Dan: If you start accepting that there are no classes and there are only objects then it gets easier ;) – Felix Kling Dec 13 '10 at 02:37
  • Yes, that is a new mindset I'm still getting used to. Thanks for the clarification. – Dan Dec 13 '10 at 02:44
1

The behaviour is correct. [] is tranlated to new Array() in runtime, but only one such array is ever created.

In other words, Obj.prototype = {...} is executed just like any other assigment.

glebm
  • 20,282
  • 8
  • 51
  • 67
-1

When you do var exp1 = new C(), JavaScript sets exp1.[[Prototype]] = C.prototype. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in [[Prototype]]. This means that all the stuff you define in prototype is effectively shared by all instances, and you can even later change parts of prototype and have the changes appear in all existing instances.

Thomas Fritsch
  • 9,639
  • 33
  • 37
  • 49
ferralucho
  • 637
  • 7
  • 24