19/30 Need an explanation


#1

So... I need to clarification as to why this works

// the original Animal class and sayName method
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};

// define a Penguin class
function Penguin(name) {
   this.name = name;
    this.numLegs = 2;
};


// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();
var penguin = new Penguin("Charlie");
penguin.sayName();

and this doesn't:

// the original Animal class and sayName method
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};

// define a Penguin class
function Penguin(name) {
   this.name = name;
    this.numLegs = 2;
};

var penguin = new Penguin("Charlie");


// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();
penguin.sayName();

#2

In short version::smile:
You have to setup the prototype-chain BEFORE you create Instance's
as the Instance's inherit the prototype from their constructor.

#= = = = = = = = = = = = = = = = = = = = = =

nice to know

You could test in labs.codecademy.com
choose Javascript
You will get a split-screen
In the left-hand-side you paste-in your code
click on the Run button.
The right-hand-side is the console

references

www.crockford.com --> for most respected guide-line in Javascript
like coding convention
www.crockford.com
http://javascript.crockford.com/code.html
http://javascript.crockford.com/survey.html

= = = = = = = = = = = = = = = = = = = = = = =

//here a code-sample
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};
    // define a Penguin class
function Penguin(name) {
   this.name = name;
    this.numLegs = 2;
};
 // set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();
var penguin = new Penguin("Charlie");
console.log(Object.getPrototypeOf(penguin))
console.log(penguin.constructor.toString())

penguin.sayName();

console.log("================================and this doesn't:")

// the original Animal class and sayName method
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
    this.ClConstr1 = "Animal";
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};
// define a Penguin class
function Penguin1(name) {
   this.name = name;
    this.numLegs = 2;
    this.ClConstr2 = "Penguin1";
};
var penguin1 = new Penguin1("Charlie1");
// set its prototype to be a new instance of Animal
Penguin1.prototype = new Animal();
console.log(Object.getPrototypeOf(penguin1))
console.log(penguin1.constructor.toString())
console.log("=== creation of penguin2 as Instance if Penguin1 ===")
penguin2 = new Penguin1("Charlie2")
console.log(Object.getPrototypeOf(penguin2))
console.log(penguin2.constructor.toString())
console.log("penguin2.sayName()")
penguin2.sayName();
console.log("penguin1.sayName()")
penguin1.sayName();

o u t p u t

{ name: undefined, numLegs: undefined, ClConstr1: 'Animal' }
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
    this.ClConstr1 = "Animal";
}
Hi my name is Charlie

================================and this doesn't:

{}
function Penguin1(name) {
   this.name = name;
    this.numLegs = 2;
    this.ClConstr2 = "Penguin1";
}
=== creation of penguin2 as Instance if Penguin1 ===
{ name: undefined, numLegs: undefined, ClConstr1: 'Animal' }
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
    this.ClConstr1 = "Animal";
}
penguin2.sayName()
Hi my name is Charlie2
penguin1.sayName()
TypeError: The property or Method sayName is not supported by this object.

( De eigenschap of methode sayName wordt niet ondersteund door dit object )


#3

But in this exercise they are trying to encourage you to think about

J a v a S c r i p t and it's == p r o t o t y p e - C h a i n ==

They want you to set up the chain:

        OBJECT
  Object.prototype
           ^
           |
  Animal.prototype  (( has the sayName Method))
           |                              ^
           |                              | 
           |                    Animal Class-Constructor
           ^                   | with this constructor
           |                   |  you can create Instance's of Animal
           |
           |    <<== You define this link in the Chain using
           ^            Penguin.prototype = new Animal();
           |
  Penguin.prototype ((is empty))
           |               ^
           |               | 
           |          Penguin Class-constructor
           ^                   | with this constructor
           |                   |  you can create Instance's of Penguin
   /Instance /      <---   using new Penguin("aName");
   | of      |
   | Penguin |
    The Penguin-Instance has access
     to Animal.prototype.sayName Method
     via the Penguin-prototype which is
      -chained- to the Animal-prototype.

+


#4

Guys this is the proper code for this exercise. Thanks.

function Animal(name, numLegs) {
this.name = name;
this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
console.log("Hi my name is " + this.name);
};

// define a Penguin class
function Penguin(name) {
this.name = name;
this.numLegs = 2;
};

// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();

// Here's where I need to create the Penguin object
var penguin = {
name: "Pinguino"

};
var penguin = new Penguin("Pinguino");
penguin.sayName();