'this' en función dentro de la función de prototipo

Question

Básicamente tengo un objeto, ampliado con una función a través de su prototipo. Dentro de esa función, existe otra función; sin embargo, al usar this en esta función anidada, no parece referirse al objeto, sino a la función.

Por ejemplo,

var sampleObject = function() { 
this.foo = 123; 
} 

sampleObject.prototype.getFoo = function() { 
var nested = function() { 
    return this.foo; 
} 
return nested(); 
} 

var test = new sampleObject(); 

window.alert(test.getFoo()); // undefined 

El this.foo no se refiere al valor de 123, pero no está definida como esto se refiere a la función anidada, en la que no existe foo. ¿Cómo puedo acceder al valor 123 desde la función anidada?

Gracias.

Answer 1

sampleObject.prototype.getFoo = function() { 
var me = this; 
var nested = function() { 
    return me.foo; 
} 
return nested; 
} 

Al guardar el valor de this en una variable local, que hacen que sea explícitamente parte del contexto léxico para esa función y para todos los ámbitos de funciones anidadas. Por lo tanto, en la llamada a "anidado", esa función interna tendrá su propio alcance (es su propio valor this), pero aún puede hacer referencia a la variable "yo" en el ámbito adjunto.

Answer 2

El trabajo común en torno a esto es utilizar el cierre

sampleObject.prototype.getFoo = function() { 
    var _this = this; 
    var nested = function() { 
    return _this.foo; 
    } 
    return nested(); 
} 

Algunas bibliotecas agregan métodos para automatizar este

• Prototype añade Function.bind (http://prototypejs.org/doc/latest/language/Function/prototype/bind/)
• Ext añade function.createDelegate (http://www.sencha.com/learn/Manual:Utilities:Function#createDelegate)
• Javascript 1.8.5 agrega function.bind (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind)

Answer 3

Esta es una verruga conocida en JavaScript. El patrón habitual es asignarlo a otra variable (a menudo uno mismo) en la función externa, luego acceda a sí mismo desde la función interna. Esto funciona.

Answer 4

Además de declararlo a var _this = this, también veo códigos que hacen var that = this o var self = this.

Conocer el alcance de su variable es importante ya que podría generar un resultado inesperado.

Answer 5

Esta es una vieja pregunta, pero le doy otra solución por el bien de la integridad. Otro enfoque implica function binding.

sampleObject.prototype.getFoo = function() { 
var nested = function() { 
    return this.foo; 
} 
return nested.bind(this)(); 
} 

Answer 6

En su ejemplo "este" se refiere al objeto de ventana, porque no se ha especificado otro contexto cuando se llama a la función anidada y se obtiene undefind porque window.foo no está definido.

Puede solucionar esto de 3 maneras.

1 - Utilizar una variable para almacenar el fuera de esta - método más utilizado

sampleObject.prototype.getFoo = function() { 
var _this = this; 
var nested = function() { 
    return _this.foo; 
} 
return nested(); 
} 

2 - Utilizar el método de enlace que se unen el exterior "this" a la interior

sampleObject.prototype.getFoo = function() { 
var nested = function() { 
    return this.foo; 
}.bind(this); 
return nested(); 
} 

3 - Utilizar el método de llamada que puede pasar el contexto de la función

SampleObject.prototype.getFoo = function() { 
var nested = function() { 
    return this.foo; 
}; 
return nested.call(this); 
} 

Answer 7

tl; dr

Use arrow functions. Están disponibles desde ECMAScript 6:

var sampleObject = function() { 
 
    this.foo = 123; 
 
} 
 

 
sampleObject.prototype.getFoo = function() { 
 
    var nested =() => { // Changed this line. 
 
    return this.foo; 
 
    } 
 
    return nested(); 
 
} 
 

 
var test = new sampleObject(); 
 

 
window.alert(test.getFoo());

Explicación

Ésta es una de las principales ventajas de las funciones de dirección. Su caso se describe en la sección: No binding of this. Los estados refference:

Hasta las funciones de dirección, cada nueva función definida por su propio valor this [...] Una función de flecha no crea su propio contexto this, por lo this tiene el significado original del contexto circundante.