方法内部的属性显示未定义但在方法外部工作。如何解决？

Question

在下面的代码中，当我执行 console.log(teacher1.getDetails()); 属性值显示未定义，但是当我执行 console.log(teacher1.personName) 或 console.log(teacher.mainSubject) 时，它显示属性值。这里发生了什么？我错过了什么？有人可以解释一下吗？以及如何让它发挥作用？

let Person = function(personName, age) {
  this.personName = personName;
  this.age = age;
};

Person.prototype.getDetails = function() {
  return `Person Name:${this.personName}. Age is ${this.age}.`;
};

//Child constructor function
let Teacher = function(personName, age, mainSubject) {
  Person.call(this, personName, age);
  this.mainSubject = mainSubject;
};
Teacher.prototype = Object.create(Person.prototype); //inheritance
Teacher.prototype.getDetails = function() {
  return `${this.__proto__.getDetails()} Main subject is ${this.mainSubject}.`; //optionally invoke the parent method.
};

let teacher1 = new Teacher("Sakib", 35, "Physics");
console.log(teacher1.getDetails()); //invokes Teacher.getDetails() method (child's method).

Answer 1

您需要像这样在 Teacher class 中实现 getDetails 方法：

Teacher.prototype.getDetails = function() {
    return `${Person.prototype.getDetails.call(this)} Main subject is ${this.mainSubject}.`;
}

您的实现不起作用，因为下一个：您调用有关父上下文的父方法，该方法没有定义值，因为在教师构造函数中您定义了有关子上下文的值。

Person.call(this, personName, age);

工作示例：

let Person = function(personName, age) {
  this.personName = personName;
  this.age = age;
};

Person.prototype.getDetails = function() {
  return `Person Name:${this.personName}. Age is ${this.age}.`;
};

//Child constructor function
let Teacher = function(personName, age, mainSubject) {
  Person.call(this, personName, age);
  this.mainSubject = mainSubject;
};
Teacher.prototype = Object.create(Person.prototype); //inheritance
Teacher.prototype.getDetails = function() {
  return `${Person.prototype.getDetails.call(this)} Main subject is ${this.mainSubject}.`; //optionally invoke the parent method.
};

let teacher1 = new Teacher("Sakib", 35, "Physics");
console.log(teacher1.getDetails()); //invokes Teacher.getDetails() method (child's method).

Answer 2

您的代码中的问题：

this.__proto__.getDetails() 不直接调用 Person.prototype 中定义的 getDetails 函数，因为在 getDetails() 函数的第一次调用中， this.__proto__ returns Teacher.prototype。结果，this.__proto__.getDetails() 调用自身，即 Teacher.prototype.getDetails()

第二次调用Teacher.prototype.getDetails()时，this.__proto__现在指的是Person.prototype，因为this现在是Teacher.prototype，它的原型是Person.prototype.

第二次调用 Teacher.prototype.getDetails() 调用 Person.prototype.getDetails() 函数
您需要绑定this以确保Person.prototype.getDetails()中this的值是正确的
您不应该使用 __proto__ - 它已被弃用。使用Object.getPrototypeOf()获取对象的原型

固定代码：

let Person = function(personName, age) {
  this.personName = personName;
  this.age = age;
};

Person.prototype.getDetails = function() {
  return `Person Name:${this.personName}. Age is ${this.age}.`;
};

let Teacher = function(personName, age, mainSubject) {
  Person.call(this, personName, age);
  this.mainSubject = mainSubject;
};

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

Teacher.prototype.getDetails = function() {
  const personPrototype = Object.getPrototypeOf(Object.getPrototypeOf(this));
  return `${personPrototype.getDetails.call(this)} Main subject is ${this.mainSubject}.`;
};

let teacher1 = new Teacher("Sakib", 35, "Physics");
console.log(teacher1.getDetails());

方法内部的属性显示未定义但在方法外部工作。如何解决？

Properties inside method showing undefined but working outside the methods . How to fix it?

javascript

inheritance