JS prototype and inheritance

Question

In my spare time I try to learn a little bit of JS, but I stuck with the topic in subject.

 var person = new Person("Bob", "Smith", 52); var teacher = new Teacher("Adam", "Greff", 209); function Humans(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } function Person(firstName, lastName, age) { Humans.call(this, firstName, lastName); this.age = age; } Person.prototype = Object.create(Humans.prototype); Person.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.age; }; function Teacher(firstName, lastName, roomNumber) { Humans.call(this, firstName, lastName); this.room = roomNumber; } Teacher.prototype = Object.create(Humans.prototype); Teacher.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.room; }; person.fullDetail(); 

Can anybody tell me why I cant execute person.fullDetail(); ?

If you could make some comments with your version of code, I would be very grateful, thanks.

Answer 1

Because you're creating your objects before you've defined what their prototypes should be.

When you do

var person = new Person ("Bob", "Smith", 52);

you're making an object based on the current definition of Person . Later in that code, you're changing the prototype of Person in it's entirety

Person.prototype = Object.create(Humans.prototype);

To fix this, create your objects after you're done re-assigning the prototype.

 function Humans(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } function Person(firstName, lastName, age) { Humans.call(this, firstName, lastName); this.age = age; } Person.prototype = Object.create(Humans.prototype); Person.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.age; }; function Teacher(firstName, lastName, roomNumber) { Humans.call(this, firstName, lastName); this.room = roomNumber; } Teacher.prototype = Object.create(Humans.prototype); Teacher.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.room; }; var person = new Person("Bob", "Smith", 52); var teacher = new Teacher("Adam", "Greff", 209); console.log(person.fullDetail()); 

Answer 2

Yes it is because when you are creating person object Person prototype has no FullDetail method.

Change the ordering of your object creation ,create person object after adding methods to prototype

check this snippet

 var teacher; var person; function Humans(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } function Person(firstName, lastName, age) { Humans.call(this, firstName, lastName); this.age = age; } Person.prototype = Object.create(Humans.prototype); Person.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.age; }; person = new Person("Bob", "Smith", 52); function Teacher(firstName, lastName, roomNumber) { Humans.call(this, firstName, lastName); this.room = roomNumber; } Teacher.prototype = Object.create(Humans.prototype); Teacher.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.room; }; teacher= new Teacher("Adam", "Greff", 209); console.log(person.fullDetail()); console.log(teacher.fullDetail()); 

Hope it helps

Answer 3

I think it's because you create the person and teacher without having their functions defined yet in the prototype. Try this:

  function Humans(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } function Person(firstName, lastName, age) { Humans.call(this, firstName, lastName); this.age = age; } Person.prototype = Object.create(Humans.prototype); Person.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.age; }; function Teacher(firstName, lastName, roomNumber) { Humans.call(this, firstName, lastName); this.room = roomNumber; } Teacher.prototype = Object.create(Humans.prototype); Teacher.prototype.fullDetail = function() { return this.firstName + " " + this.lastName + " " + this.room; }; var person = new Person ("Bob", "Smith", 52); var teacher = new Teacher ("Adam", "Greff", 209); console.log(person.fullDetail()); 

 ( ͡° ͜ʖ ͡°) 

Answer 4

If you are at ES6, you could use the new class syntax like

class ExampleBaseClass {
    // Do things here...
}

class ExampleClass extends ExampleBaseClass {
    // Do other things here...
    // You may use methods from ExampleBaseClass here.
}

See: https://www.sitepoint.com/understanding-ecmascript-6-class-inheritance/