Facendo riferimento a "questa" chiusura in un genitore in javascript

Question

io voglio fare questo in Javascript:

function Z(f) 
{ 
    f(); 
} 

function A() 
{ 
    this.b = function() 
    { 
    Z(function() { this.c() }); 
    } 

    this.c = function() 
    { 
    alert('hello world!'); 
    } 
} 

var foo = new A(); 
foo.b(); 

Può essere compiuta in questo modo:

function Z(f) 
{ 
    f(); 
} 

function A() 
{ 
    var self = this; 
    this.b = function() 
    { 
    Z(function() { self.c() }); 
    } 

    this.c = function() 
    { 
    alert('hello world!'); 
    } 
} 

var foo = new A(); 
foo.b(); 

C'è un modo migliore?

Answer 1

Mantenere un riferimento al genitore (come avete) è un buon approccio, tuttavia per il tuo esempio specifico non c'è bisogno per il wrapper anonimo, è possibile passare alla funzione direttamente, in questo modo:

var self = this; 
this.b = function() 
{ 
    Z(self.c); 
} 

You can test it out here, e senza questo involucro c'è in realtà alcuna necessità per la variabile self, si può semplicemente utilizzare this direttamente, in questo modo:

this.b = function() 
{ 
    Z(this.c); 
} 

You can test that version here.

---

Dal momento sembra che ci sia una certa confusione nei commenti qui sotto, il codice sopra mantiene thisper la domanda, se si vuole mantenere la this/contesto all'interno del callback così, utilizzare .call()like this:

this.b = function() 
{ 
    Z.call(this, this.c); 
} 

E per Z:

function Z(f) 
{ 
    f.call(this); 
} 

You can test it here.

Answer 2

C'è uno schema che viene spesso chiamato "Delega", che risolve questo problema.

in JavaScript, un'implementazione non troppo di fantasia potrebbe essere simile a questa:

/** class Delegate **/ 
var Delegate = function(thisRef, funcRef, argsArray) { 
    this.thisRef=thisRef; 
    this.funcRef=funcRef; 
    this.argsArray=argsArray; 
} 
Delegate.prototype.invoke = function() { 
    this.funcRef.apply(this.thisRef, this.argsArray); 
} 
/** static function Delegate.create - convenience function **/ 
Delegate.create = function(thisRef, funcRef, argsArray) { 
    var d = new Delegate(thisRef, funcRef, argsArray); 
    return function() { d.invoke(); } 
} 

Nel tuo esempio, si usa in questo modo:

this.b = function() { 
    Z(Delegate.create(this, this.c)); 
} 

si potrebbe anche scrivere funzioni che si aspettano di ricevere un delegato:

function Z(d) { 
    d.invoke(); 
} 

quindi, nel A, il tuo impl di b diventa:

this.b = function() { 
    var d = new Delegate(this, this.c); 

    Z(d); 
    SomeOtherFunc(d); 
} 

Il Delegate fornisce solo un modo semplice, coerente di incapsulare il riferimento this (che hai chiamato self), all'interno di un'istanza di un oggetto che può essere affrontato come qualsiasi altro istanza di oggetto. È più leggibile e ti impedisce di dover inquinare l'ambito della tua funzione con variabili superflue come self. Un'implementazione delegata più elaborata potrebbe avere i propri metodi e altri stati correlati. È anche possibile creare il delegato in modo tale da ridurre al minimo alcuni problemi di gestione della memoria relativi all'ambito (anche se il codice che ho mostrato qui non è sicuramente un esempio).

Answer 3

È possibile in alternativa utilizzare

this.b = function() 
{ 
    Z((function() { this.c() }).apply(this)); 
}