> function Parent() {this.arr = [];}
undefined
> function Child() {}
undefined
> Child.prototype = new Parent();
{ arr: [] }
> child1 = new Child();
{}
> child2 = new Child();
{}
> child1.arr.push('From child1');
1
> child2.arr
[ 'From child1' ]
>
Given the above, I would expect child2.arr to be empty as it is its own object. How can I have child1 and child2 contain their own arr? Thanks!
You'll have to make the assignment in your constructor:
function Child() {
this.arr = this.arr ? this.arr.slice(0) : [];
}
That gives each child a copy of the prototype's .arr array, if it exists. (It's just a shallow copy, and that's just a possible example.) Assignments to object properties always involve local ("own") properties of the target object, but references involve the prototype chain.
Also not that for fairly arcane reasons it's not a good idea to initialize a prototype like that. Better to use Object.create:
Child.prototype = Object.create(Parent.prototype);
That gives you a new object that uses the Parent prototype object as its prototype.
Here is a somewhat old but still interesting question on the topic.
Look into inheritance in javascript
Basically if the property is not on the object you are looking into javascript looks into it's prototype and tries to find it there until it reaches the Object.
Your Child does not have property arr but it's prototype new Parent() does and that one is referred from Child1 and Child2.
function Parent() { this.arr = []; }
function Child() { this.parent = new Parent(); }
Child.prototype = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.parent.arr.push('From child1');
alert(child2.parent.arr);
