Wie bleibt der Kontext in JavaScript-Prototypfunktionen erhalten?

Kontext in JavaScript-Prototypfunktionen bewahren: Ein umfassender Leitfaden

Viele JavaScript-Entwickler stoßen auf Herausforderungen, wenn sie versuchen, den Kontext (den Wert von „this“) zu bewahren ") innerhalb von Prototypfunktionen. Dieser Leitfaden soll ein umfassendes Verständnis dafür vermitteln, wie dieses Problem effektiv gelöst werden kann.

Im bereitgestellten Beispiel:

MyClass = function() {
  this.element = $('#element');
  this.myValue = 'something';

  // some more code
}

MyClass.prototype.myfunc = function() {
  // at this point, "this" refers to the instance of MyClass

  this.element.click(function() {
    // at this point, "this" refers to the DOM element
    // but what if I want to access the original "this.myValue"?
  });
}

new MyClass();

Das Problem tritt auf, wenn ein Ereignishandler innerhalb der Prototypfunktion definiert wird. myfunc." Während des Click-Events bezieht sich „this“ nicht mehr auf die MyClass-Instanz, sondern auf das DOM-Element.

Kontexterhaltung mit Bind

Die „bind“-Methode bietet eine einfache Lösung. Es wird eine neue Funktion erstellt, die den Kontext (diesen Wert) der ursprünglichen Funktion beibehält, auch wenn sie in einem anderen Kontext aufgerufen wird.

Durch die Verwendung von bind im Beispiel:

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

Der Klick Der Ereignishandler behält den MyClass-Instanzkontext bei und ermöglicht den Zugriff auf „this.myValue“.

Zusätzliche Bindung Beispiele

var obj = {
  test: 'obj test',
  fx: function() {
    alert(this.test + '\n' + Array.prototype.slice.call(arguments).join());
  }
};

var test = "Global test";
var fx1 = obj.fx;
var fx2 = obj.fx.bind(obj, 1, 2, 3);

fx1(1,2);
fx2(4, 5);

In diesem Beispiel:

• fx1 wird direkt aufgerufen, was zu einem globalen Kontext („globaler Test“) für „dies“ führt.
• fx2 ist eine gebundene Funktion, die den Kontext von obj beibehält und die Argumente übergibt korrekt.

Überlegungen zur Anpassung

Wenn mehrere Prototypfunktionen eine Kontexterhaltung erfordern, kann die Erstellung einer benutzerdefinierten Bindungsfunktion erforderlich sein. Sie können eine kontextbezogene Bindungsversion für Ihre MyClass erstellen:

MyClass.prototype.myBind = function(func) {
  var context = this;
  return function() {
    func.apply(context, arguments);
  };
};

Diese benutzerdefinierte Bindungsmethode kann dann innerhalb der Prototypfunktionen verwendet werden:

MyClass.prototype.myfunc = function() {

  this.element.click(this.myBind(function() {
    // ...
  }));
};

Fazit

Die Beibehaltung des Kontexts in JavaScript-Prototypfunktionen ist entscheidend, um die ordnungsgemäße Funktionalität aufrechtzuerhalten und unerwartetes Verhalten zu vermeiden. Die „Bind“-Methode bietet eine effektive und intuitive Lösung, in komplexeren Szenarien kann jedoch eine Anpassung erforderlich sein. Wenn Sie diese Techniken verstehen, können Sie Prototypfunktionen sicher verwenden, ohne die Kontexterhaltung zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie bleibt der Kontext in JavaScript-Prototypfunktionen erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!