"This" nicht verfügbar in eingebetteten Funktion für Effekte verwendet

Question

In Bezug auf das Objekt unten bekomme ich ein "Dies ist ein undefinierter Fehler". Dies tritt nur im nächsten() Funktionsblock auf ... wie unten beschrieben, wenn es im Funktionsblock Effekte platziert ist, gibt es keinen Fehler.

Dies ist nur Test-Code ... mein Ziel ist es, das Element durch den Konstruktor übergeben. Dieser Testcode hat es vom Konstruktor und von der Funktion übergeben, weil ich es teste. Sobald es passiert, werde ich das Funktionsargument von fade() nehmen.

Auch die Objektverwendung ist zufällig in einem anderen Objekt, deshalb sehen Sie auch "dieses" dort.

Object Usage:

var EffectsObject = new Effects(this.element); 
EffectsObject.fade(this.element, 'down', 4000); 

Object Definition:

var Effects = function(element) 
{ 
    this.element2 = element; 
}; 

Effects.prototype.fade = function(element1, direction, max_time) 
{ 
    Effects.elapsed = 0; 
    this.element2 = foo;  // works here but not if I put it in next(); 
    function next() 
    { 
     Effects.elapsed += 10; 
     if (direction === 'up') 
     { 
      element2.style.opacity = Effects.elapsed/max_time; // fails here 
     } 
     else if (direction === 'down') 
     { 
      this.element2.style.opacity = (max_time - Effects.elapsed)/max_time; 
     } 
     if (Effects.elapsed <= max_time) 
     { 
      setTimeout(next, 10); 
     } 
    } 
    next(); 
    return true; 
}; 

Answer 1

Sie benötigen eine Variable erstellen, die in der lexikalischen Umfang der der next Funktion ist.

var that = this;

oben next, und verwenden Sie that in next.

var that = this; 
function next() { 
// use "that" here 
... 
} 

Das Problem ist, wenn man ein Verfahren an einem Prototyp bestimmen, und dann auf der Instanz eines Objekts, das Verfahren auszuführen, der Kontext des Verfahrens (der Umfang) gesetzt wird, wenn man die Methode aufrufen. Wenn das passiert, zeigt this auf die Instanz, auf der die Methode aufgerufen wurde.

Wenn Sie next definiert haben, beachten Sie, dass es sich nicht um einen Prototyp handelt. Es ist nur eine Funktion. Wenn Sie es ausführen, ist der Kontext der Ausführung (d. H. this) nicht die Instanz des Objekts.

Wenn Sie that definieren und dann in der Funktion verwenden, befindet sich that im lexikalischen Gültigkeitsbereich der next-Funktion. Wenn Sie next aufrufen, wird eine Sperrung erstellt, die den Wert that in den Ausführungsbereich von next einsperrt.