javascript - 如何正确地使一个构造函数的原型(prototype)属性继承其原始的原型(prototype)属性？

Question

我是 javascript 编程的新手。最近我在 javascript 之旅中遇到了一个让我困惑的问题。 我想创建一个 Teacher() 构造函数，它继承 Person() 构造函数的所有成员。

首先，我创建 Person() 如下

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

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

其次，我从 Person() 创建 Teacher()。

    function Teacher(name){
      Person.call(this,name);
    };

问题是这样的:

当我尝试设置 Teacher() 的原型(prototype)时，令我困惑的是以下两种做法似乎是相同的。但我认为它们一定有一些区别。 我先这样写:

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

按照上面的写法，我认为Teacher.prototype会等于Person.prototype，事实证明这是错误的:

    Teacher.prototype === Person.prototype;//=>false

然而，Teacher()的实例teacherA成功继承了Person()的greeting方法:

    var teacherA = new Teacher();
    teacherA.name = 'Kyle';
    teacherA.greeting();//=>Hi!I'm Kyle.

然后我尝试按如下方式更改代码，使 Teacher() 的原型(prototype)属性等于 Person() 的原型(prototype)属性:

    Teacher.prototype = Person.prototype;
    Teacher.prototype === Person.prototype;//=>true

当然，Teacher()的另一个实例teacherB也继承了Person()的greeting方法:

    var teacherB = new Teacher();
    teacherB.name = 'Jane';
    teacherB.greeting();//=>Hi!I'm Jane.

谁能告诉我为什么这两种做法都可以成功继承，但在两种情况之一中 Teacher.prototype 不等于 Person.prototype，而在另一种情况下则相反？谢谢!

Answer 1

After I wrote as above, I think Teacher.prototype would be equal to Person.prototype, which proved to be wrong

是的，因为当您使用Object.create时，它会创建原型(prototype)为Person.prototype的新对象。发生的情况如下:

var mediator = {};
Object.setPrototypeOf(mediator, Person.prototype);
Teacher.prototype = mediator

所以最终的原型(prototype)链是这样的:

Teacher.prototype -> middle.__proto__ -> Person.prototype

However, teacherA, the instance of Teacher(), inherits greeting method from Person() successfully:

是的，因为正如我上面所展示的，仍然可以从 Teacher.prototype 访问 Person.prototype。

Then I tried to change my code as following, which made Teacher()'s prototype property equal to Person()'s prototype property:

不应该这样做，因为您可能想要向 Teacher 原型(prototype)添加不能从 Person 访问的方法。但是通过这样做，如果您向 Teacher 原型(prototype)添加任何方法，则可以从 Person 的实例访问它。所以，这样做之后:

Teacher.prototype = Person.prototype;

var teacher = new Teacher();
var person = new Person();

// let's add method to child Person
Person.prototype.childMethod = function() {};

// the parent can still access it
person.childMethod(); // works OK