Perché dovresti creare una variabile con valore questo

Question

Ho visto questo fatto molto in JavaScript e ricordo di aver scoperto perché, ma non riesco a ricordare la risposta.

Sto indovinando è qualcosa a che fare con il campo di applicazione e una funzione di essere chiamato fuori dalla "classe", ma perché uno dovrebbe fare questo (preferibilmente che delinea un esempio):

function myClass() 
{ 
    var self = this; 

    //... 

    this.myArray = []; 

    this.myFunc = function() { alert(self.myArray.length); }; 
} 

Answer 1

Al fine di agganciare la variabile come parte di un closure.

Ad esempio:

MyClass.prototype.doStuff = function(){ 
    this.foundItems = []; 
    var self = this; 
    this.myString.replace(/.../,function(){ 
    // `this` is actually the `window` inside this callback 
    // so we need to use `self` to invoke another method on our instance object 
    self.foundItems.push(self.doOtherStuff()); 
    }); 
}; 

L'esempio specifico che hai scritto non ha bisogno di una chiusura, se si richiama il metodo nel modo previsto:

function Foo(){ 
    this.array = []; 
    this.myFunc = function(){ 
    return this.array; 
    } 
} 
var foo = new Foo; 
foo.myFunc(); // [] 

Tuttavia, è possibile 'break' è così:

var f2 = foo.myFunc; 
f2(); // undefined, since `this` was the window 

Il tuo codice utilizzando la chiusura, d'altra parte, è sicuro contro questo tipo di t omfoolery.

Answer 2

"questo" si riferisce all'attuale "oggetto". Il potere risiede, quando si parla di javascript, nel fatto che l'espressione "questo" viene valutata in base al contesto, così ad esempio se un metodo viene eseguito in un altro contesto oggetto, il valore "questo" cambierà rispettivamente.

Answer 3

Se si crea una funzione all'interno di un'altra funzione, this per la funzione interna viene impostata sull'oggetto della finestra globale. Se si crea una variabile salvare il valore di this, come

var that = this; 

quindi è possibile utilizzare that fare riferimento alla funzione esterna all'interno della funzione interna.

Answer 4

In aggiunta ad alcune delle risposte pubblicate da altri utenti, la creazione di un set di variabili consente di riutilizzare le variabili senza accedere agli oggetti.

Simile a fare qualcosa di simile:

var myElement = document.getElementById('someElement'); 

E poi l'accesso ai MyElement se è necessario, piuttosto che document.getElementById più volte.

Impostazione che = this o self = questo consente di accedere ovunque a "that" o "self" e impedisce di ricaricare alcuni oggetti.

Answer 5

Non credo che si vuole davvero farlo:

• Ogni volta che viene creata un'istanza, si crea anche una "copia" della funzione. Quindi 5 istanze creeranno 5 "copie" della funzione.
• Quella "copia" di una funzione è legata a un ambiente che è rilevante solo per quella specifica istanza, quindi non può essere utilizzato genericamente. Ciò significa che una classe estesa otterrà un metodo che è rilevante solo per alcune istanze della classe genitore che probabilmente non viene nemmeno utilizzata.
• tuo rientro sarà sfuggire di mano, soprattutto se si inizia la nidificazione quelle funzioni inline
• Dovrete andare a caccia di funzioni all'interno di altre funzioni invece di guardare in su nella definizione del prototipo

Un'alternativa :

function MyClass() { 
    this.myArray = []; 
    this.myFunc = this.myFunc.bind(this); //The "blueprint" in the prototype is not affected, the instance gets its own bound version. 
              //This means the one in prototype can be inherited or used generically anywhere else as well 
} 

MyClass.prototype = { 

    myFunc: function() { //My func is neatly listed in the prototype and can use `this` normally 
     alert(this.myArray.length); 
    }, 

    constructor: MyClass 
}; 


var myObj = new MyClass(); 

document.addEventListener("click", myObj.myFunc); //Will now work as you "expect" it to work 

alcuni inconvenienti:

• Ogni funzione limite è una nuova funzione quindi, ad esempio, ogni volta viene creata una nuova funzione.
• Boilerplate per iscritto tutte le chiamate .bind nel costruttore, anche se può essere mitigato con un aiutante come _.bindAll