Click here to Skip to main content
15,867,972 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello to everyone!
I cannot catch the idea of what does the string Cat.prototype = new Animal(); do. and what does any constructor return? Prototype?really)?
Thank you
XML
function Animal(){
  this.eat = function(){
    console.log('eat called');
  };
}

function Cat(name){
  this.name = name;
};

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat = new Cat('No name cat');
cat.eat(); // eat called
console.log(cat.name); // No name cat
console.log(cat.constructor); // Cat
Posted
Updated 13-Aug-15 8:35am
v2
Comments
Sergey Alexandrovich Kryukov 13-Aug-15 10:50am    
It returns the clone of prototype, which can be modified through "this".
—SA

1 solution

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:
JavaScript
function Animal() {
    this.kingdom = "Animalia"
}

function CatGenus() {
    this.genus = "Felis"
}
// let's skip family, order, and higher taxons:
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:
JavaScript
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:
JavaScript
var someObject = {a:1, b:2}
function someFunction() {
    return 3;
}
someFunction.prototype = someObject
var someDerivedObject = new someFunction();
// same properties as in someObject
// but someObject.constructor is undefined

var functionResult = someFunction(); // just a number 3

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
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900