javascript - Why does a method's `this` change when calling a reference to an object's method?

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

Why does genderTeller(); alerts undefined is not clear to me. if I see it I believe it's just same as line above it. Can some please explain the details

Answer 1

When you assign a variable like this...

var genderTeller = person1.sayGender;

...you lose the context of the person1 object, and the function's this points to the global object (window in a browser), instead of the instantiated person1 object.

You get undefined because the gender property does not exist on window, and referencing an undefined property on an object returns undefined in JavaScript.

You can fix that in modern browsers with bind()...

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

...or jQuery has a method too called proxy().

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