如何在 Javascript 中覆蓋父方法？

Question

假設我們有一個 object Person ，如下所示：

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

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

和它的孩子

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

我試圖覆蓋greeting方法如下：

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

        }

但是teacher1.greeting()調用Person的方法，而不是Teacher的方法，如您在此處看到的：

• 哪里錯了？

Answer 1

更新的答案：現在我在家並在筆記本電腦上，我看到了這個錯誤。 您將教師原型設置在錯誤的位置。

所以你需要這樣做：

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

正因為如此，每次你實例化一個新的Teacher實例時，你都會用Person覆蓋它的原型。 因此，無論您將教師的原型設置為什么，它都會被覆蓋。

Answer 2

在您的第一個 class 中，在 Person function 原型上greeting function。 如果你在構造函數 function 中使用this ，那么你指的是新創建的 object，而不是函數的原型。 如果您想覆蓋原型 function，這是正確的方法：

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

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

您可以通過檢查Person.prototype.greeting的值來將此代碼與您的代碼進行比較。

這就是為什么你不能用 Teacher class 覆蓋它的原因，因為每次創建 Teacher object 並調用它的構造函數時，Person 構造函數都會覆蓋greeting function。

Answer 3

問題是您將greeting定義為Person中的實例方法。 它應該是Person.prototype的一個方法。 為什么？ 因為當您引用實例的屬性時，解釋器總是首先檢查實例屬性是否存在，然后是實例的構造函數原型屬性。

所以這應該工作：

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