F.prototype
In modern JavaScript we can set a prototype using __proto__
, as described in the previous article. But it wasn't like that all the time.
JavaScript has had prototypal inheritance from the beginning. It was one of the core features of the language.
But in the old times, there was another (and the only) way to set it: to use a "prototype"
property of the constructor function. And there are still many scripts that use it.
The "prototype" property
As we know already, new F()
creates a new object.
When a new object is created with new F()
, the object's Prototype
is set to F.prototype
.
In other words, if F
has a prototype
property with a value of the object type, then new
operator uses it to set Prototype
for the new object.
Please note that F.prototype
here means a regular property named "prototype"
on F
. It sounds something similar to the term "prototype", but here we really mean a regular property with this name.
Here's the example:
let animal = {
eats: true
};
function Rabbit(name) {
this.name = name;
}
*!*
Rabbit.prototype = animal;
*/!*
let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
alert( rabbit.eats ); // true
Setting Rabbit.prototype = animal
literally states the following: "When a new Rabbit
is created, assign its Prototype
to animal
".
That's the resulting picture:
On the picture, "prototype"
is a horizontal arrow, it's a regular property, and Prototype
is vertical, meaning the inheritance of rabbit
from animal
.
Default F.prototype, constructor property
Every function has the "prototype"
property even if we don't supply it.
The default "prototype"
is an object with the only property constructor
that points back to the function itself.
Like this:
function Rabbit() {}
/* default prototype
Rabbit.prototype = { constructor: Rabbit };
*/
We can check it:
function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }
alert( Rabbit.prototype.constructor == Rabbit ); // true
Naturally, if we do nothing, the constructor
property is available to all rabbits through Prototype
:
function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }
let rabbit = new Rabbit(); // inherits from {constructor: Rabbit}
alert(rabbit.constructor == Rabbit); // true (from prototype)
We can use constructor
property to create a new object using the same constructor as the existing one.
Like here:
function Rabbit(name) {
this.name = name;
alert(name);
}
let rabbit = new Rabbit("White Rabbit");
*!*
let rabbit2 = new rabbit.constructor("Black Rabbit");
*/!*
That's handy when we have an object, don't know which constructor was used for it (e.g. it comes from a 3rd party library), and we need to create another one of the same kind.
But probably the most important thing about "constructor"
is that...
...JavaScript itself does not ensure the right "constructor"
value.
Yes, it exists in the default "prototype"
for functions, but that's all. What happens with it later -- is totally on us.
In particular, if we replace the default prototype as a whole, then there will be no "constructor"
in it.
For instance:
function Rabbit() {}
Rabbit.prototype = {
jumps: true
};
let rabbit = new Rabbit();
*!*
alert(rabbit.constructor === Rabbit); // false
*/!*
So, to keep the right "constructor"
we can choose to add/remove properties to the default "prototype"
instead of overwriting it as a whole:
function Rabbit() {}
// Not overwrite Rabbit.prototype totally
// just add to it
Rabbit.prototype.jumps = true
// the default Rabbit.prototype.constructor is preserved
Or, alternatively, recreate the constructor
property it manually:
Rabbit.prototype = {
jumps: true,
*!*
constructor: Rabbit
*/!*
};
// now constructor is also correct, because we added it
Summary
In this chapter we briefly described the way of setting a Prototype
for objects created via a constructor function. Later we'll see more advanced programming patterns that rely on it.
Everything is quite simple, just few notes to make things clear:
-
The
F.prototype
property is not the same asPrototype
. The only thingF.prototype
does: it setsPrototype
of new objects whennew F()
is called. -
The value of
F.prototype
should be either an object or null: other values won't work. -
The
"prototype"
property only has such a special effect when is set to a constructor function, and invoked withnew
.
On regular objects the prototype
is nothing special:
let user = {
name: "John",
prototype: "Bla-bla" // no magic at all
};
By default all functions have F.prototype = { constructor: F }
, so we can get the constructor of an object by accessing its "constructor"
property.