var self = esto?

Question

Utilizando los métodos de instancia como devoluciones de llamada para los controladores de eventos cambia el alcance de this de "Mi ejemplo" a "Lo que acaba de llamar la devolución de llamada". Mi código es así

function MyObject() { 
    this.doSomething = function() { 
    ... 
    } 

    var self = this 
    $('#foobar').bind('click', function(){ 
    self.doSomethng() 
    // this.doSomething() would not work here 
    }) 
} 

Funciona, pero ¿es esa la mejor manera de hacerlo? Me parece extraño

Answer 1

Esta pregunta no es específico de jQuery, pero adaptadas a JavaScript en general. El problema principal es cómo "canalizar" una variable en funciones incorporadas. Este es el ejemplo:

var abc = 1; // we want to use this variable in embedded functions 

function xyz(){ 
    console.log(abc); // it is available here! 
    function qwe(){ 
    console.log(abc); // it is available here too! 
    } 
    ... 
}; 

Esta técnica se basa en el uso de un cierre. Pero no funciona con this porque this es una variable que puede cambiar seudo ámbito de alcance de forma dinámica:

// we want to use "this" variable in embedded functions 

function xyz(){ 
    // "this" is different here! 
    console.log(this); // not what we wanted! 
    function qwe(){ 
    // "this" is different here too! 
    console.log(this); // not what we wanted! 
    } 
    ... 
}; 

¿Qué podemos hacer? Asignarla a alguna variable y utilizarlo a través del alias:

var abc = this; // we want to use this variable in embedded functions 

function xyz(){ 
    // "this" is different here! --- but we don't care! 
    console.log(abc); // now it is the right object! 
    function qwe(){ 
    // "this" is different here too! --- but we don't care! 
    console.log(abc); // it is the right object here too! 
    } 
    ... 
}; 

this no es único en este sentido: arguments es la otra variable de pseudo que debe ser tratada de la misma manera — por aliasing.

Answer 2

creo que realmente depende de lo que se va a hacer dentro de su función doSomething. Si va a acceder a MyObject propiedades usando esta palabra clave, entonces debe usar eso. Pero creo que el siguiente fragmento de código también funcionará si no está haciendo cosas especiales usando las propiedades object(MyObject).

function doSomething(){ 
    ......... 
} 

$("#foobar").ready('click', function(){ 

}); 

Answer 3

Sí, parece ser un estándar común. Algunos codificadores usan uno mismo, otros me usan. Se usa como referencia para el objeto "real" en lugar del evento.

Es algo que me tomó un poco de tiempo para conseguir realmente, que tiene un aspecto extraño al principio.

por lo general hago este derecho en la parte superior de mi objeto (excusa mi código de demostración - es más conceptual que otra cosa y no es una lección sobre la excelente técnica de codificación):

function MyObject(){ 
    var me = this; 

    //Events 
    Click = onClick; //Allows user to override onClick event with their own 

    //Event Handlers 
    onClick = function(args){ 
    me.MyProperty = args; //Reference me, referencing this refers to onClick 
    ... 
    //Do other stuff 
    } 
} 

Answer 4

yo no tengo usó jQuery, pero en una biblioteca como Prototype puede vincular funciones a un alcance específico. Así que con eso en mente su código se vería así:

$('#foobar').ready('click', this.doSomething.bind(this)); 

El método de enlace devuelve una nueva función que llama al método original con el alcance que ha especificado.

Answer 5

var functionX = function() { 
    var self = this; 
    var functionY = function(y) { 
    // If we call "this" in here, we get a reference to functionY, 
    // but if we call "self" (defined earlier), we get a reference to function X. 
    } 
} 

editar: a pesar de que las funciones anidadas dentro de un objeto adoptan el objeto de ventana global en lugar del objeto circundante.

Answer 6

Solo agregue a esto que en ES6 debido a arrow functions no debería necesitar hacer esto porque capturan el valor this.

Answer 7

Una solución a esto es para prender a todos su devolución de llamada a su objeto con el método de Javascript bind.

Usted puede hacer esto con un método llamado,

function MyNamedMethod() { 
    // You can now call methods on "this" here 
} 

doCallBack(MyNamedMethod.bind(this)); 

O con una devolución de llamada anónima

doCallBack(function() { 
    // You can now call methods on "this" here 
}.bind(this)); 

Haciendo estos en lugar de recurrir a var self = this muestra a entender cómo la unión de this se comporta en javascript y no confía en una referencia de cierre.

Además, el operador de grasa flecha en la ES6 básicamente es lo mismo un llamado .bind(this) en una función anónima:

doCallback(() => { 
    // You can reference "this" here now 
}); 

Answer 8

Si usted está haciendo ES2015 o hacer la escritura tipo y ES5 continuación, puede utilizar las funciones de dirección en su código y no se enfrenta a ese error y esto se refiere a su alcance deseado en su instancia.

this.name = 'test' 
myObject.doSomething(data => { 
    console.log(this.name) // this should print out 'test' 
});