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.

you are creating the instances before defining the functions! — Daniel A. White
– Daniel A. White, Commented Nov 14, 2016 at 21:20
@Feathercrown Not the issue of setting the wrong prototype, which is exactly the problem — Bergi
– Bergi, Commented Nov 14, 2016 at 21:25
@Bergi yeah, on second thought, it doesn't fix the whole thing. — Feathercrown
– Feathercrown, Commented Nov 14, 2016 at 21:26

Mike Cluck · Accepted Answer · 2016-11-14 21:22:05Z

6

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

answered Nov 14, 2016 at 21:22

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tcooc Over a year ago

You can actually prove it by showing that Object.getPrototypeOf(person) !== Person.prototype. The prototype or the original is person instance is "lost" and replaced. Very interesting edge case for javascript inheritance!

Geeky · Accepted Answer · 2016-11-14 21:25:52Z

5

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

edited Nov 14, 2016 at 21:25

answered Nov 14, 2016 at 21:21

Geeky

7,5142 gold badges28 silver badges52 bronze badges

4 Comments

tcooc Over a year ago

While this fixes that use case, it doesn't fix the fact that teacher is still broken!

jlb Over a year ago

Just to add, the reason you're able to create a person before the constructor function (and prototype changes) is because of this annoying/counter-intuitive thing called 'hoisting' developer.mozilla.org/en/docs/Web/JavaScript/Reference/….

jlb Over a year ago

@tcooc try moving the teacher instantiation down below the Teacher constructor

Bergi Over a year ago

Your explanation isn't entirely correct. It does not matter when the methods are added to the prototype - it just needs to be done before calling them.

Feathercrown · Accepted Answer · 2016-11-14 21:24:21Z

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

( ͡° ͜ʖ ͡°)

Max · Accepted Answer · 2016-11-14 22:11:39Z

0

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/

answered Nov 14, 2016 at 22:11

Max

3162 silver badges5 bronze badges

Collectives™ on Stack Overflow

JS prototype and inheritance

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related