结合使用bind（this）和jQuery.each，模糊地使用“ this”

Question

I've got a complex JS app, OOP style, where objects hirearchy is used. Class Grandfather is extended by class Father, which is extended by class Child. I've got different instances of class Child.

To avoid property confusion and mix-up, I am heavily using .bind(this) to callback. Example

$(this.buttonId).click(function(evt)) {
    console.log(this.myProperty);
    this.myMethod();
}.bind(this));

In this way I am sure that this.myProperty and this.myMethod are always "mine", and not my father's or my brother's.

Now i need to rely on jQuery.each method . But to access each item I need "this" again!

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

So, if I bind the callback to "this" (object), it's going to become:

$( "li" ).each(function( index ) {
    console.log( index + ": " + $( this ).text() );
    console.log(this.myProperty);
    this.myMethod();
}.bind(this));

causing an ambiguous use of "this" which, of course, leads to lots of errors.

Any ideas? Thank you

Answer 1

Set a local variable before jquery-each function:

var me = this;
$( "li" ).each(function( index ) {
    console.log( index + ": " + $( this ).text() );
console.log(me.myProperty);
});