First of all, the line
Cat.prototype.constructor = Cat;
is redundant, because it's already
Cat
.
To give you some idea, let's continue prototype chain:
function Animal() {
this.kingdom = "Animalia"
}
function CatGenus() {
this.genus = "Felis"
}
CatGenus.prototype = new Animal()
function Cat(aName) {
this.name = aName
this.species = "Felis silvestris catus"
}
Cat.prototype = new CatGenus()
var cat = new Cat("Pooh")
If you dump the object
cat
, you will see that it has the following properties:
name: "Pooh"
species: "Felis silvestris catus"
genus: "Felis"
kingdom: "Animalia"
Now, the worse thing you could do it to think of it as of object-oriented hierarchy. In all cases, I would recommend to read this article:
http://davidwalsh.name/javascript-objects-distractions[
^].
The JavaScript types are very different from OOP types:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures[
^].
JavaScript has little in common with that; everything is much simpler but maybe more complicated, depending on where you come from. You should think in terms of objects. An object is just an
associative array with properties represented by key-value pairs (
https://en.wikipedia.org/wiki/Associative_array[
^], see also
https://en.wikipedia.org/wiki/JavaScript#Dynamic[
^]). All the constructors are just function objects which may or may not be used as constructor. When you use a function as a constructor, "
new
" is used, and function's this is used as the reference to the object.
Consider this simpler code sample:
var someObject = {a:1, b:2}
function someFunction() {
return 3;
}
someFunction.prototype = someObject
var someDerivedObject = new someFunction();
var functionResult = someFunction();
Without using "this",
someFunction
just returns some result. However, nothing prevents you from changing a prototype (before the assignment
someFunction.prototype = someObject
it already was some "empty" but not undefined object). When some function is called through "
new
", it simply takes the prototype object as "this", modifies it, if the constructor body has appropriate operations on "this" (usually adds some properties) and returns; the return value is ignored.
It's important to understand that the
prototype object is cloned, not just used as a reference. To see it, add a property to
someDerivedObject
— it won't be added to
someObject
, so it can be used as a prototype object for other objects, no matter what you do with other "derived" objects.
See also:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain[
^],
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype[
^],
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf[
^].
I would recommend to experiment with this stuff focusing on first principles: objects and properties. Instead of "catching the idea", it would be useful to imagine that there is no any predefined ideas; there are just first principles, and the usage of them should be generated from you, first hand.
—SA