Consider the following to JavaScript snippets:
function foo() {
this.bar = function() { };
}
// or... (if we used an empty constructor function)
foo.prototype.bar = function() { };
What's the difference when I do this:
function baz() {
}
baz.prototype = new foo();
In both cases baz
ends up having a member bar
but what's the difference? Why would I do this in different places?
The difference is where in the prototype chain the property is located.
Assuming we have f = new foo();
and b = new baz()
. Then we have the following situations:
Definition of foo
without using a prototype:
+-----------+ +---------------+
| f | | foo.prototype |
| __proto__-+---->| constructor |
| bar | | |
+-----------+ +---------------+
bar
is a property of the object itself (f.howOwnProperty('bar')
returns true
).
If you assign the property to the prototype instead, the situation is:
+-----------+ +---------------+
| f | | foo.prototype |
| __proto__-+---->| constructor |
| | | bar |
+-----------+ +---------------+
f
does not have its own property bar
, but the property is shared with all other foo
instances.
Similar for the second snippet, which results either in
+-----------+ +---------------+ +---------------+
| b | | foo instance | | foo.prototype |
| __proto__-+---->| __proto__ -+---->| constructor |
| | | bar | | |
+-----------+ +---------------+ +---------------+
or
+-----------+ +---------------+ +---------------+
| b | | foo instance | | foo.prototype |
| __proto__-+---->| __proto__ -+---->| constructor |
| | | | | bar |
+-----------+ +---------------+ +---------------+
Why do you want to do this?
It's mainly about structure and not wasting memory. You can add functions to an object in a constructor function:
function Foo() {
this.bar = function() {};
}
but this also means that each instance of Foo
has it's own function, that is, f1.bar === f2.bar
is false
, although both functions are doing the exact same thing.
Using the prototype gives you a clean way to separate properties common to all instances and instance-specific ones.
In the end, it is "just" inheritance which is one concept in software development (like aggregation) and can be used wherever it makes sense. Your second snippet basically means that a baz
is-a foo
, so a baz
instance, in addition to its own properties, has the same properties as a foo
instance (inherited).
One big difference is that if you change properties of the prototype those changes will apply to all instances, including those that already exist, whereas if you change a property that was created in the constructor it will only change it for the instance you change it on.
Regarding what some of the other answers said about setting bar
in the constructor resulting in each instance having its own copy of the function: that's true if you have a function expression inside the constructor as shown in the code in the question, but not true if you assign a function reference like this:
function myFunction() {}
function foo() {
this.bar = myFunction;
}
In that case all instances will have a bar
property that refers to the same function - but an individual instance could still have its bar
property assigned to something else without affecting other instances.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With