如何在 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?

Answer 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.

Answer 2

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.

Answer 3

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; } }