How does a prototype property work in memory?
If the prototype is shared among all instances, how does the prototype property work?
function Foo() {
}
Foo.prototype.property = 1;
var a = new Foo();
var b = new Foo();
a.property = 50;
console.log(b.property) // why this line shows 1?
If not used, what's the difference between a prototype property and an in-memory constructor property?
function Foo() {
}
Foo.prototype.property = 1;
vs
function Foo() {
this.property = 1;
}
Additional doubts:
- How are these two different ways of working in memory?
- Which one is using more memory and why?
- When I create a method in the prototype, it seems to me that it is shared between all instances, I think I will only have one method loaded into memory, but I cannot figure out how the property works.
source to share
function Foo() {
}
// Hey, everybody, if anyone asks you about 'property'
// unless you have your own, use this one.
Foo.prototype.property = 1;
var a = new Foo();
var b = new Foo();
// Hey, you! You're special. You get your own property.
// This one covers the shared one.
a.property = 50;
// Hey you, B! You're using the shared one.
console.log(b.property) // why this line shows 1?
This is sort of the main difference between 'prototype' and local property.
If on an object you ask for a property that has no object, it works with the parent and asks, "Hey, can I use yours?" This brings everything back to the root object.
For real fun and a sure firefighter way to make your coworkers hate you, install:
Object.prototype.something = true;
I will be available everywhere and break all sorts of things.
// Everyone share this copy of property
function Foo() {
}
Foo.prototype.property = 1;
// Hey everybody! You get your OWN copy of property! Ain't you special.
function Foo() {
this.property = 1;
}
source to share
The difference between prototype and constructor can be shown by changing them after the object is created:
var a = new Foo();
var b = new Foo();
Foo.prototype.property = 50;
console.log(b.property); // This will show 50
If you put the assignment in the constructor, changing it will not affect objects that have already been created.
In memory, a prototype is an object that is shared by all objects created from it. Therefore, instead of each object having its own copy property
, they all refer to the same object prototype; it uses less memory. If you are referencing a property in an object, it first checks if it has its own property under that name. If not, it goes through the prototype chain looking for a property.
In this respect, there is no difference between methods and other properties. A method is just a property whose value is a function. It's just that it is more common to propagate methods across all instances of a class than to share values. But the prototype property is a useful way to provide each instance with a default value for that property.
source to share
If the prototype is shared among all instances, how does the prototype property work?
The object [[Prototype]]
is available only when resolving property names to get property values . When assigning a property, only the object itself is checked.
> function Foo() {}
>
> Foo.prototype.property = 1;
>
> var a = new Foo(); var b = new Foo();
>
> a.property = 50;
>
> console.log(b.property) // why this line shows 1?
This line displays 1
because when doing the assignment:
a.property = 50;
object a is checked for a property named property and since it does not have one, it is added and initialized with a value 50
. Then when you do:
console.log(b.property) // why this line shows 1?
Object b has no property of a property, so it is [[Prototype]]
checked and the property is found there with a value 1
, so it is returned.
If not used, what's the difference between a prototype property and an in-memory constructor property?
Your term "constructor property" should really be an "instance property". Properties in the prototype are only available when a value is retrieved, and then never available when accessing it.
How are these two different ways of working in memory?
These are separate things, in one case you created a property in the prototype of the constructor, and in the other - a property of the object itself. How it "works in memory" depends on the author of the browser and doesn't really bother.
Which one is using more memory and why?
It does not matter. Even if there were a difference, it would be tiny and inconsequential in the scheme of things.
When I create a method in the prototype, it seems to me that it is shared between all instances, I think I will only have one method loaded into memory, but I cannot figure out how the property works.
"Methods" are properties too. You access them by reading the value, the same as reading the value of any property in an object or its chain [[Prototype]]
. But when you assign the Object property, it is placed directly on the object, no chaining [[Prototype]]
is considered.
source to share