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 的值是在调用函数 时确定的，而不是由定义它的时间或位置确定的。

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

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

window.gender = 'n/a';

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