Significado de la palabra clave "this" en jQuery Vs MVC

Question

Estoy tratando de entender la diferencia de usar la palabra clave "this" o más bien lo que representa en jQuery Vs un framework MVC como Backbone.

A continuación se muestran 2 ejemplos de código de cada uno; Así que en jQuery, tenemos

$("#result").click(function(){ 
$(this).html(someval); 
}) 

En la espina dorsal, que tienen como código;

var HandlebarsView = Backbone.View.extend({ 
el: '#result' 
initialize: function(){ 
this.template = Handlebars.compile($('#template').html());  
}, 
render: function(){ 
var html = this.template(this.model.toJSON()); 
this.$el.html(html); 
} 
}); 

Ahora entiendo que "esto" se refiere al elemento DOM en jQuery.

Quería entender lo que representa en el caso del código Backbone.

Háganme saber.

Answer 1

this es el contexto en el que se ejecuta una función.

El truco para entender this es entender que es la forma de ejecutar una función que lo determina.

Cuando pasa una función a un método como jQuery, está utilizando esa función como método de devolución de llamada. jQuery establece explícitamente el contexto de la devolución de llamada cuando se ejecuta.

Cuando llama a un método en un objeto usando la notación de puntos: myView.render() es la notación de puntos que establece explícitamente el contexto de la llamada al objeto delante del punto.

Las reglas para establecer un contexto son bastante simples en JavaScript, pero pueden causar mucha confusión. La mayoría de los lenguajes establecen la variable de contexto de autorreferencia para el objeto en el que se definió el método. Sin embargo, JavaScript usa el patrón de invocación de método para determinar el contexto.

Cuando pasamos el método de cualquier objeto como un método de devolución de llamada, el código que lo llama establece el contexto del método, esto incluye las vistas de Backbone y otros objetos. Puede anularlo explícitamente utilizando las funciones Underscore.js 'bind y bindAll (http://documentcloud.github.com/underscore/#bind), así como algunos otros trucos.

Backbone.View.extend({ 
    initialize: function(){ 
    _.bindAll(this); 
    } 
}); 

Este código, por ejemplo, se unirá el contexto de todas las funciones en el objeto de vista actual, a la vista. Esto garantiza que el contexto de sus métodos de vista siempre será la vista en sí misma.

Para más información ver:

• http://es5.github.com/ - Especificación ES5 anotada
• http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
• http://lostechies.com/derickbailey/2011/06/15/solving-backbones-this-model-view-problem-with-underscore-js/
• http://www.watchmecode.net/javascript-context (mi propio screencast que cubre todas las reglas y la forma de utilizarlos - un screencast de pago)

Answer 2

En Backbone 'this' dentro de la vista se refiere al objeto de vista actual. En los modelos, "esto" se refiere al objeto modelo actual. Y de manera similar para las colecciones, "esto" se refiere al objeto de colección actual.

Pero para las vistas 'esto' es transitorio entre el elemento dom seleccionado por jQuery y el objeto de vista, es por eso que usamos _.bindToda la función para que podamos asegurarnos de que 'esto' sigue siendo el objeto de vista actual cuando estamos llamando ciertas funciones como 'render', etc. Consulte http://documentcloud.github.com/underscore/#bindAll