javascript hasOwnProperty原型(prototype)和继承

Question

我检查了问题: javascript what is property in hasOwnProperty? 和 javascript hasOwnProperty and prototype但找不到我的问题的答案。这是我的代码:但有些答案让我感到困惑(与预期不符)。

function School(schoolName) {
  this.schoolName = schoolName;
}
School.prototype.printSchoolName = function() {
  console.log(this.schoolName);
}

function Student(studentName, schoolName) {
  this.studentName = studentName;
  this.schoolName = schoolName; // alternative : School.call(this, schoolName);
}
Student.prototype = new School(); // force l'héritage des propriétés de School
Student.prototype.printStudentName = function() {
  console.log(this.studentName);
}
var s = new Student("Victor", "IUT");
s.printStudentName(); // works fine
s.printSchoolName(); // works fine
console.log(Student.prototype.hasOwnProperty("printStudentName")); // works as expected: true
console.log(Student.prototype.hasOwnProperty("printSchoolName")); // works as expected: false
console.log(Student.prototype.hasOwnProperty("studentName")); //  NOT as expected: false
console.log(School.prototype.hasOwnProperty("schoolName")); //  NOT as expected: false
console.log(Object.getOwnPropertyNames(new School())); // schoolName
console.log(Object.getOwnPropertyNames(new Student())); // studentName, schoolName

尽管 hasOwnProperty 已检测到这些方法，但最后 2 个警报并未提及这些方法。令人费解。谢谢。

Answer 1

首先要注意的是，使用new School 设置Student.prototype 是一种反模式。这是一种反模式，您看到很多，但它确实是一种反模式。 (这也很奇怪:Student 与 School 有一个“is-a”关系？!通常会有一个“has-a”关系[不是继承]，但是不是“is-a”...)我们会回来讨论它。

回答:

console.log(Student.prototype.hasOwnProperty("studentName"));
//  NOT as expected: false

从来没有在 Student.prototype 上设置 studentName 属性，因此它没有该属性也就不足为奇了。当您调用 Student 函数时，它会在 instance 上设置一个，但是 Student.prototype 不是 new 创建的实例学生，所以它从来没有一套。

继续:

console.log(School.prototype.hasOwnProperty("schoolName"));
//  NOT as expected: false

同样的解释。

继续:

console.log(Object.getOwnPropertyNames(new School()));
// schoolName
console.log(Object.getOwnPropertyNames(new Student()));
// studentName, schoolName

你看不到原型(prototype)方法的原因是 getOwnPropertyNames 只显示直接在你调用它的对象上设置的属性名称(新的 School对象和新的 Student 对象)。这些方法不是直接设置在那些对象上，而是设置在这些对象的原型(prototype) 上。所以他们没有列出。

---

关于反模式:在 ES5 和更早的语法中，使用构造函数设置原型(prototype)继承的正确方法是通过 Object.create，而不是调用构造函数。此外，在替换函数的 prototype 属性上的对象后，将其 constructor 属性设置回其应有的状态很有用:

Student.prototype = Object.create(School.prototype);
Student.prototype.constructor = Student;

当然，在 ES2015(又名“ES6”)及更高版本中，您可以使用 class 表示法(如果需要，对旧版浏览器进行转译)，它会为您正确处理。