How do I override a parent's method in Javascript?

Question

let's suppose we have an object Person as follows:

function Person(name){
            this.name = name;

            this.greeting = function(){
                alert("Hi I'm " + this.name);
            }
        }

and its child

function Teacher(name, subject){
            Person.call(this, name); 
            this.subject = subject;
            Teacher.prototype = Object.create(Person.prototype);
        }

I tried to override greeting method as follows:

Teacher.prototype.greeting = function(){                
                alert("Hello my name is " + this.name + " and I teach " + this.subject);

        }

but teacher1.greeting() invokes Person's method and not Teacher's one, as you can see here:

Where's the mistake?

Can you post a minimal reproducible example to show how exactly are you calling this code? — VLAZ
– VLAZ, Commented Nov 2, 2019 at 16:24
You still haven't shown how this code is being called. Please make a runnable example that reproduces the issue. — VLAZ
– VLAZ, Commented Nov 2, 2019 at 16:39
You will need to a) define the parent greeting method on Person.prototype, not inside the constructor, and b) move the Teacher.prototype = Object.create(Person.prototype) outside of the Teacher constructor. — Bergi
– Bergi, Commented Nov 2, 2019 at 16:39
Maybe it's not necessary to b) because I tried @dmigo solution and works fine — HeyBoo
– HeyBoo, Commented Nov 2, 2019 at 16:44

Euroclydon37 · Accepted Answer · 2019-11-02 17:09:21Z

1

UPDATED ANSWER: Now that I'm home and on a laptop, I see the bug. You set the Teacher prototype in the wrong place.

So you needed to do this:

// Incorrect
function Teacher(first, last, age, gender, interest, subject) {
  Person.call(this, first, last, age, gender, interest);
  this.subject = subject;
  Teacher.prototype = Object.create(Person.prototype);
}

// Correct
function Teacher(first, last, age, gender, interest, subject) {
  Person.call(this, first, last, age, gender, interest);
  this.subject = subject;
}

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

Because of this, every time you instantiated a new instance of Teacher, you would override it’s prototype with Person. So no matter what you set the Teacher's prototype to, it was getting overwritten.

edited Nov 2, 2019 at 17:09

answered Nov 2, 2019 at 16:25

Euroclydon37

6658 silver badges20 bronze badges

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

4 Comments

HeyBoo Over a year ago

I don't have to use them

Kalesh Kaladharan Over a year ago

@HeyBoo Well! That's a reason.

HeyBoo Over a year ago

I followed this guide developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/… but it does not work properly

Euroclydon37 Over a year ago

You would need to put the method override into the Object.create call inside the teacher function.

andnik · Accepted Answer · 2019-11-02 17:09:44Z

0

In your first class greeting function on Person function prototype. If you use this in constructor function, then you refer to newly created object, not to function's prototype. This is correct way if you want to override prototype function:

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

Person.prototype.greeting = function(){
    alert("Hi I'm " + this.name);
}

You can compare this code with yours by checking value of Person.prototype.greeting.

That's why you couldn't override it with Teacher class, cause greeting function was overwritten by Person constructor every time you create Teacher object and call it's constructor.

edited Nov 2, 2019 at 17:09

answered Nov 2, 2019 at 17:04

andnik

2,8642 gold badges26 silver badges37 bronze badges

2 Comments

VLAZ Over a year ago

You don't have to change the prototype in the constructor.

andnik Over a year ago

@VLAZ, you're right, it makes no sense. I modified my answer

KooiInc · Accepted Answer · 2019-11-04 07:09:22Z

The problem is that you define greeting as an instance method in Person. It should be a method of Person.prototype. Why? Because when you reference a property of an instance the interpreter always first checks for existence of instance properties, then the constructor prototype properties of an instance.

So this should work:

const someTeacher = new Teacher("Peter", "Jones", 26, "Male", "Functional Programming", "Math");
someTeacher.greeting();

function Person(first, last, age, gender, interest) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interest = interest;
  
  // set the Person.prototype greeting method
  // if not already done
  if (!Person.prototype.greeting) {
    Person.prototype.greeting = function() {
      console.log("Hi I'm " + this.name.first);
    };
  }
}

function Teacher(first, last, age, gender, interest, subject) {
  Person.call(this, first, last, age, gender, interest);
  this.subject = subject;
  
  // set Teachers prototype to Person
  // if not already done
  if (!Teacher.prototype.greeting) {
    // override [greeting] first. If you do this after
    // pointing the prototype to Person, it wil not
    // work, probably because in that case you're
    // overwriting Person.prototype.greeting which is
    // a nogo
    Teacher.prototype.greeting = function() {
      console.log("Hello my name is " + this.name.first + " and I teach " + this.subject);
    };
    // set prototype to Person
    Teacher.prototype = Person;
  }
}

Collectives™ on Stack Overflow

How do I override a parent's method in Javascript?

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related