构造函数之外的 JavaScript OOP 原型(prototype)？

Question

我在阅读 developer.mozilla.org 的 OOP JS 指南时看到了这个片段:

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

Person.prototype.gender = '';

Person.prototype.sayHello = function () {
  alert ('hello');
};

var person1 = new Person('Male');
var person2 = new Person('Female');

// call the Person sayHello method.
person1.sayHello(); // hello

我不明白，if (gender) 已经被定义为this.gender；为什么我们需要把 Person.prototype.gender = '';线？我理解构造函数之外的函数，但似乎该行重复了 this.gender;线。我知道这是将性别创建为 Person() 对象的属性，但这不只是重复 this.gender 吗？

如果有任何解释，我将不胜感激，我是 OOP JS 的新手。谢谢!

Answer 1

通过添加 Person.prototype.gender = ''; Person 有一个“默认”性别 persay。如果在实例化时没有指定性别，它更像是为 Person 定义性别。请记住，当 gender 为 undefined 时设置 this.gender = gender 仍然算作指定值。

当您尝试从您的人员中删除 gender 属性时，情况会变得很明显。如果 Person.prototype.gender = ''; 被省略，则可能会出现以下情况:

var person1 = new Person('Male');

// check gender
person1.gender === 'Male'; // true

// remove gender property from person1
delete person1.gender;

person1.gender === undefined; // true

因为 person1 不再有 gender ，它不能在这个 Person 实例中引用它，所以它会在 Person 构造函数中查找它的原型(prototype)链。它不会在那里找到它，因为在构造函数中 this.gender = gender; 是一个实例属性。查找过程沿着原型(prototype)链向上继续，直到找到该属性。

现在考虑我们是否有以下情况:

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

Person.prototype.gender = 'Asexual';

var person1 = new Person('Male');
var person2 = new Person('Female');
var person3 = new Person();

// check genders, looking at instance property
person1.gender === 'Male'; //true
person2.gender === 'Female'; //true
person3.gender === undefined; //true

// remove their genders
delete person1.gender;
delete person2.gender;
delete person3.gender;

// check genders again, now it's looking up the prototype chain 
person1.gender === 'Asexual'; //true
person2.gender === 'Asexual'; //true
person3.gender === 'Asexual'; //true