Javascript object members that are prototyped as arrays become shared by all class instances

by

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.

More Related Contents:

  1. Use of .apply() with ‘new’ operator. Is this possible?
  2. Advantages of using prototype, vs defining methods straight in the constructor? [duplicate]
  3. Defining a Javascript prototype
  4. What is “undefined x 1” in JavaScript?
  5. What techniques can be used to define a class in JavaScript, and what are their trade-offs?
  6. Sorting objects by property values
  7. Properties of Javascript function objects
  8. No ways to have class-based objects in javascript?
  9. How can I extend Array.prototype.push()?
  10. Create a reset of javascript Array prototype when Array.prototype has been modified?
  11. Object vs Class vs Function
  12. Objects don’t inherit prototyped functions
  13. Does JavaScript have classes?
  14. Why is it impossible to change constructor function from prototype?
  15. Javascript: hiding prototype methods in for loop?
  16. Why aren’t methods of an object created with class bound to it in ES6?
  17. What does the new keyword do under the hood?
  18. ‘this’ is undefined in JavaScript class methods
  19. ES6 – declare a prototype method on a class with an import statement
  20. Cartesian product of multiple arrays in JavaScript
  21. Create an array with same element repeated multiple times
  22. adding custom functions into Array.prototype
  23. Javascript – remove an array item by value [duplicate]
  24. Sorting on a custom order
  25. Index an array of arrays with an array of indexes in javascript
  26. Javascript: take every nth Element of Array
  27. Array map function doesn’t change elements
  28. How to Select Element That Does Not have Specific Class
  29. How can I remove a specific item from an array in JavaScript?
  30. Duck Typing in Javascript

Leave a Comment