Problem:
In prototypischem JavaScript beim Definieren von Funktionen Innerhalb eines Prototyps ändert sich der Bereich und der Wert von „this“ verweist möglicherweise nicht mehr auf die Instanz der Klasse. Dies kann den Zugriff auf die Eigenschaften und Methoden des Originalobjekts erschweren.
Lösung: Verwendung der bind()-Methode
Die bind()-Methode ermöglicht es Entwicklern Bewahren Sie den Kontext von „diesem“ innerhalb von Prototypfunktionen. Sie gibt eine neue Funktion mit dem angegebenen Kontext als erstem Argument zurück, während die restlichen Argumente an die ursprüngliche Funktion übergeben werden.
MyClass.prototype.myfunc = function() { this.element.click((function() { // ... }).bind(this)); };
In diesem Beispiel wird die bind()-Methode verwendet, um den Kontext beizubehalten von „this“ innerhalb der anonymen Funktion, die dem Click-Event-Handler zugewiesen ist.
Beispiel mit mehreren Prototypfunktionen:
Durch die Verwendung von bind() entfällt die Notwendigkeit, a explizit zu speichern Verweis auf „dies“ in jeder Prototypfunktion. Zum Beispiel:
MyClass.prototype.doSomething = function() { // operate on the element }.bind(this);
Durch die Verwendung von bind() in der Definition von doSomething wird der Kontext von „this“ automatisch für alle Instanzen der Klasse beibehalten.
Vermeidung von Global Variablen:
Die Verwendung einer globalen Variablen zum Halten eines Verweises auf „this“ wird nicht empfohlen, da sie den globalen Namespace verschmutzt und verhindert, dass mehrere Instanzen der Klasse erstellt werden, ohne sich gegenseitig zu beeinträchtigen. Die bind()-Methode bietet eine effizientere und sauberere Lösung.
Fazit
Die bind()-Methode bietet eine leistungsstarke Möglichkeit, den Kontext von „dies“ im Inneren zu bewahren Prototypfunktionen, sodass keine manuelle Referenzierung und globale Variablen erforderlich sind. Dieser Ansatz verbessert die Lesbarkeit, Wartbarkeit und Flexibilität des Codes in prototypischen JavaScript-Anwendungen.
Das obige ist der detaillierte Inhalt vonWie können Sie den Kontext von „this' in JavaScript-Prototypfunktionen beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!