javascript - 为什么在调用对对象方法的引用时方法的 `this` 会发生变化？

Question

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

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

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

person1.sayGender(); // alerts 'Male'
genderTeller(); // alerts undefined

为什么 genderTeller();警报未定义我不清楚。如果我看到它，我相信它和上面的线一样。能否请一些人解释一下细节

Answer 1

当你像这样分配一个变量时......

var genderTeller = person1.sayGender;

...您丢失了 person1 对象的 context，函数的 this 指向全局对象 (window 在浏览器中)，而不是实例化的 person1 对象。

您得到 undefined 因为 gender 属性在 window 上不存在，并且在对象上引用 undefined 属性返回 undefined 在 JavaScript 中。

您可以在现代浏览器中使用 bind() 修复该问题...

var genderTeller = person1.sayGender.bind(person1);

...或者 jQuery 有一个方法也叫做 proxy() .

var genderTeller = $.proxy(person1.sayGender, person1);