Javascript "questo" ambito dando risultato diverso a seconda del modo in cui viene chiamato

Question

Tutti,

Questo è il codice:

var Person = function (name) { 

    this.name = name; 

    this.printName = function(){ 
    console.log("My name is " + this.name); 
    } 

}; 


var p = new Person("Steve"); 

var funcRef = p["printName"]; 

p.printName();//Works 

p["printName"]();//Works 
funcRef();//returns incorrect value 

Trovare un esempio di lavoro qui: http://plnkr.co/edit/57LS6oXPfqccAWf6uqQV?p=preview

La mia domanda è qual è la differenza tra gli ultimi due? Sto accedendo al metodo dell'oggetto allo stesso modo, l'unica differenza è il modo in cui viene chiamato.

Perché restituisce un risultato differenza?

La prima volta che mi sono imbattuto in javascript. Capisco che è in un ambito diverso, ma non so come sia stato disaccoppiato dall'oggetto che è quello che vorrei capire.

Grazie

Steve

Answer 1

javascript legano la parola this quando si chiama la funzione sull'oggetto direttamente.

Con test.fn(), this sarà test all'interno di fn. Lo stesso con test['fn'](). Ma se lo fai var fn = test.fn; fn(), this sarà la radice globale (window in un browser) all'interno di fn.

È possibile forzare il this all'interno di una funzione come questa: var fn = test.fn.bind(test);

maggiori informazioni qui: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

Case1: 'questo' prende sempre il contesto dell'oggetto rispetto al quale la sua chiamata.

In p.printName() il contesto è p quindi 'questo' fa riferimento all'oggetto Persona a cui fa riferimento 'p'.

Caso2: Tuttavia, quando si esegue il comando "funcRef" sul metodo p, questo perde il contesto e "this" fa riferimento all'oggetto globale.

L'oggetto globale può essere diverso a seconda del proprio ambiente js (come il contesto del browser o nodo e così via).

Ecco perché si vedono risultati diversi.

Answer 3

Come altre risposte dire, this è associato quando si chiama la funzione. Un modo comune per mantenere il riferimento all'oggetto è di usare qualcosa di simile:

var Person = function (name) { 

    var self = this; // Keep a reference to this object for later use 
    self.name = name; 

    self.printName = function(){ 
    console.log("My name is " + self.name); 
    } 

}; 

Answer 4

Come questo scopo si comporta è già spiegato da risposte di cui sopra, ecco le migliori pratiche per 'questo' usi, utilizzare 'questo' come una nuova variabile chiamata 'self', vedi sotto codice, in questo modo hai un controllo migliore e meno errori dovuti a usi errati di questo scope.

var Person = function (name) { 
    var self=this; 
    self.name = name; 

    self.printName = function(){ 
    console.log("My name is " + self.name); 
    } 
};