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

Question

我正在阅读关于OOP JS的developer.mozilla.org指南并遇到了这个片段:

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

我不明白,如果(性别)已被定义为this.gender; 为什么我们需要把Person.prototype.gender =''; 线？我理解它对于构造函数之外的函数,但似乎该行重复了this.gender; 线.我知道它是创建性别作为Person()对象的属性,但不是只重复this.gender？

我很感激任何解释,我是OOP JS的新手.谢谢!

Answer 1

通过添加Person.prototype.gender = '';Person具有"默认"性别persay.如果在实例化时未指定性别,则更像是为Person定义性别.请记住,设置this.gender = 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构造函数中查找其原型链.并且它不会在那里找到它,因为在构造函数中this.gender = gender;是一个实例属性.查找过程继续原型链直到找到属性.

现在考虑我们是否有以下内容:

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