Gibt es eine bessere Methode als eine Variable zu dieser Einstellung?
-
01-10-2019 - |
Frage
In meinem JavaScript-Objekte fand ich mich dieses Schreiben:
this_object = this;
Es scheint, es ist der einzige Weg Membervariablen auf externe Funktionen zu übergeben ...
google.maps.event.addListener(this.marker, 'click', function() {
this.info_window.setContent('Chicago marker');
this.info_window.open(this.map,this.marker);
});
Das funktioniert nicht, ich habe das Objekt in eine Membervariable kopieren und das neue Objekt übergeben (und ersetzen alle this
mit this_object
)
Das fühlt sich hässlich. Gibt es eine „bessere“ oder „saubere“ Art und Weise, oder ist das meine einzige Option?
Lösung
Sicher gibt es eine bessere Methode. Es geht um eine Funktion zu schaffen, die den this
Kontext hat bereits auf ein bestimmtes Objekt gebunden ist.
Um den this
Kontext auf das aktuelle Objekt verweisen haben, rufen Sie die bind()
Methode auf die Funktion und übergeben Sie den gewünschten Kontext als Parameter.
google.maps.event.addListener(this.marker, 'click', function() {
this.info_window.setContent('Chicago marker');
this.info_window.open(this.map,this.marker);
}.bind(this)); // <-- notice we're calling bind() on the function itself
Das ist jetzt Teil des ECMAScript-Standard, und wenn ein Browser es nicht nativ implementieren, ist es einfach, es selbst zu tun.
if (!Function.prototype.bind) {
Function.prototype.bind = function () {
var fn = this,
args = Array.prototype.slice.call(arguments),
object = args.shift();
return function () {
return fn.apply(
object, args.concat(Array.prototype.slice.call(arguments))
);
};
};
}
Alle Fragen und Antworten auf SO im Zusammenhang mit dieser.
Andere Tipps
Es ist eigentlich ein ziemlich übliches Muster, wenn sie mit JavaScript zu tun einen Verweis von this
in einer lokalen Variablen zu speichern, das heißt var myThing=this;
. Denken Sie daran, Funktionen haben Zugriff auf lokale Variablen in ihrem Umfang definiert. Alle Variablen definiert in den enthaltenden Funktionen sind.
Sie finden dieses Stück Code finden sehr häufig in vielen Bibliotheken und Projekte:
function someFunction() {
var that = this;
//....
}
Betrachten wir zum Beispiel diese Funktion:
function container(param) {
function dec() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}
this.member = param;
var secret = 3;
var that = this;
return function () {
if (dec()) {
return that.member + " " + secret;
} else {
return null;
}
};
}
var c = container("foo");
alert( c() ); // "foo 2";
alert( c() ); // "foo 1";
alert( c() ); // "foo 0";
alert( c() ); // null;
Lesen Sie mehr über hier .
Ich habe das Muster gesehen vor (mit den Variablen in Frage gestellt wird), so dass ich davon ausgehen, es ist in der Tat ein gemeinsames Javascript Muster, das nicht nur eine saubere Lösung.
Ich bin nicht sicher, dies wird dazu beitragen, was Szenario Sie es zu tun, aber ich habe YUI benutzerdefinierte Ereignis-Dienstprogramm Arbeit gut mit Scoping Probleme mit diesem und Schließungen gefunden. Es ist ein ereignisgesteuertes Modell, und eine etwas andere Art zu denken, aber es könnte einen Besuch wert zumindest sein.