CODEWITHSUNDEEP
javascriptprototypeprototypal-inheritance
vlad
vlad

Reputation: 1035

JS prototype and inheritance

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.

Upvotes: 2

Views: 253

Answers (4)

Max
Max

Reputation: 316

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/

Upvotes: 0

Geeky
Geeky

Reputation: 7488

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

Upvotes: 5

Feathercrown
Feathercrown

Reputation: 2591

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());
( ͡° ͜ʖ ͡°)

Upvotes: 1

Mike Cluck
Mike Cluck

Reputation: 32511

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());

Upvotes: 6

Related Questions