Javascript - setinterval verursacht Objekte Eigenschaften vergessen?

Question

Dieser Code funktioniert gut:

function whatever() { 
    var s = new a('ayy'); 
    s.recall(); 
} 

function a(word) { 
    this.word = word; 
    this.recall = function() { 
     alert(this.word); 
    } 
} 

Der Browser den Benutzer mit ayy alarmieren würde. Aber warum, wenn statt wie dies geschehen:

function whatever() { 
    var s = new a('ayy'); 
    setInterval(s.recall,1000); 
} 

function a(word) { 
    this.word = word; 
    this.recall = function() { 
     alert(this.word); 
    } 
} 

Aber in diesem Fall erscheint die Warnung „undefiniert“ jede Sekunde statt „ayy.“ Warum ist das??

Answer 1

Sie verlieren den richtigen Wert von this in Ihrer Funktion wegen der Art, wie setInterval() es aufruft.

Ändern Sie Ihren Code:

setInterval(s.recall.bind(s),1000); 

Wenn Sie passieren s.recall zu setInterval(), die nur eine Funktion Verweis übergibt und den Wert von s nicht in übergeben, wenn recall von setInterval() genannt wird. Dies gilt für jede Funktionsreferenz.

Wenn ja:

var f = s.recall; 
f(); 

Sie würden das gleiche Problem sehen. Die Verwendung von .bind() ist ein Workaround, um sicherzustellen, dass die Funktion als s.recall() aufgerufen wird und somit den Wert s und damit den Wert this innerhalb der recall-Methode beibehält.

---

Der Wert von this innerhalb einer Funktion durch, wie es bestimmt wird, aufgerufen wird. Damit eine Methode den richtigen Wert von this hat, muss sie wie obj.method() oder ähnlich wie .bind(), .call() oder .apply() aufgerufen werden, um den Wert von this zu steuern. setInterval() tut nichts davon. Es macht nur einen normalen Funktionsaufruf und this wird entweder auf die globale oder auf undefined festgelegt (je nachdem, ob Sie im strikten Modus sind oder nicht).

Weitere Informationen dazu, wie der Wert this in einer JavaScript-Funktion gesteuert wird, finden Sie unter Controlling the Value of this in a function.