調用對象方法的引用時，爲什麼方法的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對象的背景，而該函數的this指向全局對象（window在瀏覽器中），而不是實例化的person1對象。

你得到undefined因爲gender屬性不上window存在，在對象上引用一個未定義的屬性在JavaScript中返回undefined。

您可以修復，在現代瀏覽器與bind() ......

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

...或jQuery有一個叫太方法proxy()。

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

Answer 2

要調用沒有它的對象的上下文功能，使this將是全局對象window，因此函數提醒的window.gender的價值，這是undefined。

Answer 3

這就是JavaScript範圍的工作原理。我想下面的例子會給你一個很好的見解。

this.gender = 'Female'; 

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 'Female' 

---

沒有搞清楚什麼是this在你調用一個函數值的簡單方法。它通常是之前dot您調用該功能。例如：

person1.sayGender()這裏this = person1

object1.object2.foo()這裏this = object2

genderTeller()這裏this = window，因爲你不是從任何對象調用它。

很明顯，你可以設置this值與.call或.apply功能，但通常我遵循這個規則，當我建立我的代碼的心理模型。