Question

我有以下代码：

function inheritPrototype (sup, sub) {
  var proto = Object.create(sup.prototype);
  Object.defineProperty(proto, "constructor", {value : sub});
  sub.prototype = proto;
}

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

  if (!Person.prototype.getName) {
    Person.prototype.getName = function () { return this.name; }
    Person.prototype.getAge = function () { return this.age; }
  }
}

function Employee (name, age, skills) {
  Person.call(this, name, age);
  this.skills = skills;

  if (!Employee.prototype.getSkills) {
    inheritPrototype(Person, Employee);
    Employee.prototype.getSkills = function () { return this.skills; }
  }
}

var person = new Person ("Dave", 21);
var employee = new Employee ("David", 22, ["C", "C++", "Java", "Python", "PHP"]);

console.log(employee.getSkills());

inheritPrototype刚刚定义为阻止父（Person）构造函数的双重调用。为了清楚起见，我在构造函数中分配原型属性，并在每次创建新实例时防止它发生，我正在检查是否存在原型属性。如果确实如此，那么我们不想重新分配属性，否则我们会这样做。问题是，我得到一个TypeError，说'employee.getName is not a function'。这只发生在我尝试使用Employee实例访问Employee的原型属性时。人员构造函数具有相同的方式来分配Prototype属性，但它工作正常。

console.log(person.getName()); // "Dave"
console.log(employee.getSkills()); // or getName or anything, TypeError

我想我在做一些傻事但却找不到它。那么，怎么了？

Answer 1

如何在外面拨打inheritPrototype？

这对我有用：

function inheritPrototype (sup, sub) {
  var proto = Object.create(sup.prototype);
  Object.defineProperty(proto, "constructor", {value : sub});
  sub.prototype = proto;
}

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

  if (!Person.prototype.getName) {
    Person.prototype.getName = function () { return this.name; }
    Person.prototype.getAge = function () { return this.age; }
  }
}

function Employee (name, age, skills) {
  Person.call(this, name, age);
  this.skills = skills;

  if (!Employee.prototype.getSkills) {
    Employee.prototype.getSkills = function () { return this.skills; }
  }
}

inheritPrototype(Person, Employee); // <= FIX

var person = new Person ("Dave", 21);
var employee = new Employee ("David", 22, ["C", "C++", "Java", "Python", "PHP"]);

console.log(person.getName()); // returns "Dave"
console.log(employee.getSkills()); // returns ["C", "C++", "Java", "Python", "PHP"]
console.log(employee.getName());  // returns David

Answer 2

主要是这个问题是由于一旦调用了inheritPrototype方法，原型引用不匹配。

在inheritPrototype方法中，您有Object.create（sup.prototype），它试图从原型中创建一个新实例，该实例与创建Employee对象时使用的对象引用不同。

这可以在为Employee prototype打印的控制台日志中看到，其中为原型创建了一个新的引用，其中EmployeeOne不调用inheritPrototype方法具有相同的引用。

因此，您看到异常的原因是参考不匹配。即使您引用原型，在inheritMethod调用之前和之后引用也是不同的。

我没有备份我的理论的文档，但是，我认为原型参考在inheritPrototype方法调用调用的情况下已经改变，这就是为什么新添加的方法getSkills在原型链查找时不可见那个对象。

但是，在第一次员工调用期间更新原型值后，后续员工对象能够看到新的getSkills，因为原型引用现在指向早期调用的原型引用。

function inheritPrototype(sup, sub) {
  var proto = Object.create(sup.prototype);
  Object.defineProperty(proto, "constructor", {
    value: sub
  });
  sub.prototype = proto;
}

function Person(name, age) {
  this.name = name;
  this.age = age;

  if (!Person.prototype.getName) {
    Person.prototype.getName = function () {
      return this.name;
    }
    Person.prototype.getAge = function () {
      return this.age;
    }
  }
}

function Employee(name, age, skills) {
  Person.call(this, name, age);
  this.skills = skills;

  var p = Employee.prototype;
  if (!Employee.prototype.getSkills) {
    inheritPrototype(Person, Employee);

    Employee.prototype.getSkills = function () {
      return this.skills;
    }
  }
  console.log("Employee with inheritPrototype invocation : " + (p === Employee.prototype));
}


function EmployeeOne(name, age, skills) {
  Person.call(this, name, age);
  this.skills = skills;

  var p = EmployeeOne.prototype;
  if (!EmployeeOne.prototype.getSkills) {
    EmployeeOne.prototype.getSkills = function () {
      return this.skills;
    }
  }
  console.log("EmployeeOne without inheritPrototype invocation : " + (p === EmployeeOne.prototype));
}


var person = new Person("Dave", 21);
var employee = new Employee("David", 22, [
  "C",
  "C++",
  "Java",
  "Python",
  "PHP"
]);

var employeeOne = new EmployeeOne("DavidOne", 22, [
  "C",
  "C++",
  "Java",
  "Python",
  "PHP"
]);

var employeeTwo = new Employee("David", 22, [
  "C",
  "C++",
  "Java",
  "Python",
  "PHP"
]);

console.log(employeeTwo.getSkills());

我试图在inheritPrototype方法之后查找Employee构造函数的引用，我在上面对原型的新引用的解释证明是正确的。

function inheritPrototype(sup, sub) {
  var proto = Object.create(sup.prototype);
  Object.defineProperty(proto, "constructor", {
    value: sub
  });
  sub.prototype = proto;
}

function Person(name, age) {
  this.name = name;
  this.age = age;

  if (!Person.prototype.getName) {
    Person.prototype.getName = function() {
      return this.name;
    }
    Person.prototype.getAge = function() {
      return this.age;
    }
  }
}

function Employee(name, age, skills) {
  Person.call(this, name, age);
  this.skills = skills;

  var p = Employee.prototype;
  if (!Employee.prototype.getSkills) {
    inheritPrototype(Person, Employee);
    Employee.prototype.getSkills = function() {
      return this.skills;
    }
  } else {
    inheritPrototype(Person, Employee);

  }
  if (employeeTwoPrototype !== undefined) {
    console.log("Employee with 2nd inheritPrototype invocation : " + (p === employeeTwoPrototype));

    console.log("Employee with 2nd inheritPrototype invocation : " + (p === Employee.prototype));
  } else {
    console.log("Employee with inheritPrototype invocation : " + (p === Employee.prototype));
  }
}



function EmployeeOne(name, age, skills) {
  Person.call(this, name, age);
  this.skills = skills;

  var p = EmployeeOne.prototype;
  if (!EmployeeOne.prototype.getSkills) {
    EmployeeOne.prototype.getSkills = function() {
      return this.skills;
    }
  }
  console.log("EmployeeOne without inheritPrototype invocation : " + (p === EmployeeOne.prototype));
}


var person = new Person("Dave", 21);
var employee = new Employee("David", 22, [
  "C",
  "C++",
  "Java",
  "Python",
  "PHP"
]);

var employeeOne = new EmployeeOne("DavidOne", 22, [
  "C",
  "C++",
  "Java",
  "Python",
  "PHP"
]);

var employeeTwo = new Employee("David", 22, [
  "C",
  "C++",
  "Java",
  "Python",
  "PHP"
]);

var employeeTwoPrototype = Employee.prototype;
var employeeThree = new Employee("David", 22, [
  "C",
  "C++",
  "Java",
  "Python",
  "PHP"
]);


console.log(employeeTwo.getSkills());

在重新获取原型属性时出现TypeError

2 个答案: