javascript - 为什么将变量(在对象范围之外)设置为等于对象方法会返回未定义的结果？

Question

下面的代码是从 MDN page on OOP with JavaScript 复制粘贴的.我用 JavaScript 研究了关于 OOP 的一般问题。但是，我是初学者，对此代码段有以下问题:

1. 行 Person.prototype.gender = ''; 的目的是什么？如果我将其取出并运行代码，我会得到相同的结果。

2. 为什么调用 genderTeller() 会导致“未定义”警报？从初学者的 Angular 来看，MDN 的解释似乎有点单薄。这是范围问题吗？

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

Person.prototype.gender = '';

Person.prototype.sayGender = function () {
    alert(this.gender);
};

var person1 = new Person('Male');
var genderTeller = person1.sayGender;

person1.sayGender(); // alerts 'Male'
genderTeller(); // alerts undefined
alert(genderTeller === person1.sayGender); // alerts true
alert(genderTeller === Person.prototype.sayGender); // alerts true

Answer 1

What is the purpose of the line Person.prototype.gender = '';? If I take it out and run the code, I get the same results.

这似乎为 gender 属性建立了一个默认值。有了它，即使在不调用构造函数的情况下创建实例，属性仍然会被设置:

var person2 = Object.create(Person.prototype);
console.log(person2.gender); // ""

这在创建子类型时很有用:

function Employee() {}
Employee.prototype = Object.create(Person.prototype);

console.log(new Employee().gender); // ""

---

Why exactly does calling genderTeller() cause an 'undefined' alert?

MDN 的 document on this应该进一步解释它，尤其是关于“函数上下文”的部分。但是，this 的值是在调用 function 时确定的，而不是由定义它的时间或位置确定的。

通过将 person1.sayGender 分配给 genderTeller，它与 person1 解除关联。因此，它不再是特定对象的“方法”。

相反，它作为一个常规函数调用，this 的值默认为全局对象，在浏览器中为 window。

window.gender = 'n/a';

var genderTeller = person1.sayGender;
genderTeller(); // logs: 'n/a'