var self = esto?

El uso de métodos de instancia como devoluciones de llamada para los controladores de eventos cambia el alcance de thisde "Mi ejemplo" a "Lo que acaba de llamar la devolución de llamada" . Entonces mi código se ve 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

Esta pregunta no es específica de jQuery, sino específica de JavaScript en general. El problema central es cómo "canalizar" una variable en funciones integradas. 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 thisporque thises una pseudo variable que puede cambiar de un alcance a otro dinámicamente:

// 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? Asignarlo a alguna variable y usarlo 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!
  }
  ...
};

thisno es único a este respecto: argumentses la otra pseudo variable que debe tratarse de la misma manera, mediante alias.

Sí, esto parece ser un estándar común. Algunos codificadores se usan a sí mismos, otros me usan a mí. Se utiliza como referencia de regreso al objeto "real" en lugar del evento.

Es algo que me tomó un poco de tiempo entender, al principio parece extraño.

Por lo general, hago esto justo en la parte superior de mi objeto (disculpe mi código de demostración, es más conceptual que cualquier otra cosa y no es una lección sobre una 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
  }
}

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, las funciones anidadas dentro de un objeto toman el objeto de la ventana global en lugar del objeto circundante.

Si está haciendo ES2015 o está haciendo script de tipo y ES5, entonces puede usar funciones de flecha en su código y no enfrenta ese error y esto se refiere al alcance deseado en su instancia.

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

Una solución a esto es vincular toda su devolución de llamada a su objeto con el bindmétodo de JavaScript .

Puedes hacer esto con un método con nombre,

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));

Hacer esto en lugar de recurrir a var self = thismuestra que comprende cómo se thiscomporta el enlace de javascript y no se basa en una referencia de cierre.

Además, el operador de flecha gruesa en ES6 básicamente es lo mismo que invocar .bind(this)una función anónima:

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

No he usado jQuery, pero en una biblioteca como Prototype puede vincular funciones a un ámbito específico. Entonces, 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.

Simplemente agregue a esto que en ES6 debido a las funciones de flecha, no debería necesitar hacer esto porque capturan el thisvalor.

Creo que en realidad depende de qué vas a hacer dentro de tu doSomethingfunción. Si va a acceder a las MyObjectpropiedades usando esta palabra clave, entonces debe usarla. Pero creo que el siguiente fragmento de código también funcionará si no está haciendo cosas especiales usando object(MyObject)propiedades.

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

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

});