Esiste un metodo migliore di impostare una variabile a questo?
-
01-10-2019 - |
Domanda
Nel mio oggetti JavaScript ho trovato me stesso a scrivere questo:
this_object = this;
Sembra che sia l'unico modo per passare variabili membro a funzioni esterne ...
google.maps.event.addListener(this.marker, 'click', function() {
this.info_window.setContent('Chicago marker');
this.info_window.open(this.map,this.marker);
});
che non funziona, devo copiare l'oggetto in una variabile membro e passare il nuovo oggetto (e sostituire tutti this
con this_object
)
Questo si sente brutto. C'è un modo o "migliore" "pulito", o si tratta di mia unica opzione?
Soluzione
Certo c'è un metodo migliore. Esso comporta la creazione di una funzione che ha il contesto this
già vincolato ad un particolare oggetto.
Per sfruttare al this
contesto riferiscono all'oggetto corrente, chiamare il metodo bind()
sulla funzione e passare il contesto richiesto come parametro.
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
Questa è ormai parte dello standard ECMAScript, e se un browser non implementa in modo nativo, è facile farlo voi stessi.
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))
);
};
};
}
Mostra tutte le noreferrer domande e risposte su SO correlate a questo.
Altri suggerimenti
In realtà è un modello abbastanza comune quando si tratta di JavaScript per memorizzare un riferimento di this
in una variabile locale vale a dire var myThing=this;
. Ricorda funzioni hanno accesso alle variabili locali definite nella loro portata. Tutte le variabili definite nelle funzioni che contengono sono accessibili.
Troverete questo pezzo di codice piuttosto frequenti in molte biblioteche e progetti:
function someFunction() {
var that = this;
//....
}
Per esempio, si consideri questa funzione:
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;
Per saperne di più qui .
ho visto il modello prima (con la variabile in questione essere chiamato), quindi immagino che è effettivamente un modello javascript comune che non solo ha una soluzione detergente.
Io non sono certo che questo vi aiuterà qualunque scenario si sta trattando, ma ho trovato utilità evento personalizzato di YUI al lavoro bene con scoping problemi con questo e chiusure. Si tratta di un modello event-driven, e un modo leggermente diverso di pensare, ma potrebbe essere la pena di esplorare, almeno.